标签: transform

如何使用apply-templates仅按名称(非值)选择以特定模式结尾的元素？假设以下xml ...

<report>
  <report_item>
    <report_created_on/>
    <report_cross_ref/>
    <monthly_adj/>
    <quarterly_adj/>
    <ytd_adj/>
  </report_item>
  <report_item>
   ....
  </report_item>
</report>

我想<xsl:apply-templates>在所有子<report_item>元素以'adj`结尾的实例上使用,因此,在这种情况下,只选择monthly_adj,quaterly_adj和ytd_adj并使用模板.

<xsl:template match="report">
   <xsl:apply-templates select="report_item/(elements ending with 'adj')"/>
</xsl:template>

我想这样做:-webkit-transform: translateX(300px)但是从右边开始而不是左边的原点.
我试过-webkit-transform-origin: 100% 100%,甚至top right没有影响它.

有办法吗？

我里面有块包装器和 div 。对于子项，我应用 CSS 旋转，并且我希望父级 div 会更改它的宽度和高度 - 子级 div 必须始终位于父级内部（就像图片上一样）。

#wrap {
  margin-top: 100px;
  width: auto;
  height: auto;
  position: relative;
  border: 1px solid red;
  box-sizing: border-box;
}
#div {
  position: relative;
  top: 0;
  left: 0;
  background-color: green;
  width: 200px;
  height: 80px;
  display: block;
  transform: rotate(120deg);
}

<div id="wrap">
  <div id="div">123</div>
</div>

示例： https: //jsfiddle.net/y2mw3wxn/

示例它必须如何：

我目前正在构建一个网站，并且遇到了transform: scale. 我有一个按钮，当用户将鼠标悬停在它上面时，会发生两件事：

1. 背景对角线“扫过”
2. 按钮标签颜色变化
3. 按钮略微增长

我已经开始工作了，它看起来非常好，但是在实施第3点之后，当按钮增大时，我看到左侧有一个奇怪的间隙。

这是我的代码：点击演示

HTML

<a href="#" class="button">Hover</a>

CSS

body {
    text-align: center;
    padding-top: 10%;
}

.button {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 600;
    background: transparent;
    transition: all ease .25s;
    border: 3px solid green;
    color: green;
    position: relative;
    overflow: hidden;
    z-index: 2;
    font-family: sans-serif;
    padding: 20px 35px;
    text-decoration: none;
}

.button:before {
    content: ' ';
    transition: all ease-out .25s;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; …

我想使用 std::transform 做一些类似于 binary_op 的事情，但有一个附加常量，例如，获得两个向量的乘积： x1 = (10,20,30,40,50) 和 x2 = (2, 4,6,8,10），我们可以写：

#include <iostream>
#include <algorithm>
#include <vector>


double multiply(double x, double y){
    return x*y;
}

int main () {
  std::vector<int> x1;
  std::vector<int> x2;


  for (int i=1; i<6; i++)
    x1.push_back (i*10); //10,20,30,40,50

  for (int i=1; i<6; i++)
    x2.push_back (i*2);  //2,4,6,8,10



  std::transform (x1.begin(), x1.end(), x2.begin(), x1.begin(),multiply);


  for (std::vector<int>::iterator it=x1.begin(); it!=x1.end(); ++it)
    std::cout << ' ' << *it;
  //output: 20,80,180,320,500

  return 0;
}

上面的代码将 x1 和 x2 按元素相乘并返回 (20,80,180,320,500)。

但是，如果我想计算 x1 …

我想将一张图像的相位谱和不同图像的幅度谱组合成一张图像。

我已经得到了图像 A 和图像 B 的相位谱和幅度谱。

这是代码。

f = np.fft.fft2(grayA)
fshift1 = np.fft.fftshift(f)
phase_spectrumA = np.angle(fshift1)
magnitude_spectrumB = 20*np.log(np.abs(fshift1))

f2 = np.fft.fft2(grayB)
fshift2 = np.fft.fftshift(f2)
phase_spectrumB = np.angle(fshift2)
magnitude_spectrumB = 20*np.log(np.abs(fshift2))

我试图弄清楚，但我仍然不知道该怎么做。

下面是我的测试代码。

imgCombined = abs(f) * math.exp(1j*np.angle(f2))

我希望我能像那样出来

我想将 div 从其中心点移动，但似乎translate()并不关心变换原点是什么，而是使用元素的左上角来移动它。

这是一个测试来证实这一点：

<div class="items" style="">
  <div class="item-1" style="width: 100px; height: 100px; background: blue; position: absolute; opacity: 0.5; transform-origin: 0% 0%; transform: translate(100px, 100px)"></div>
  <div class="item-2" style="width: 100px; height: 100px; background: red;  position: absolute; opacity: 0.5; transform-origin: 100% 100%; transform: translate(100px, 100px)"></div>
</div>

正如您所看到的，机器人项目重叠了，而它不应该重叠。

问题：如何使用中心点定位元素？

注意：由于我使用 JS 旋转和移动这些项目，因此仅减去项目宽度/高度的一半不是一个选项，因为它需要我不知道的数学。

我知道我们可以让对象有一个新的父对象作为枢轴，或者我们可以调整网格内的几何位置。

但是，我们如何在不重新指定对象的父对象或修改对象的父对象，并且不修改对象的几何形状（如果它是网格）的情况下在数学上实现这一点？

换句话说，我们需要对它的变换矩阵（或部分、旋转、位置、四元数等）做些什么才能达到相同的效果，同时满足上述不接触父级或几何体的要求？

我有一个三个箭头放大和向下移动的动画，除了不透明度之外，还使用CSS变换（缩放和translateY）。它在 Chrome、Firefox 中工作正常，但 Safari 只显示一个小箭头淡入和淡出。请访问 jsfiddle 进行演示，它使用 SCSS。

https://jsfiddle.net/hyanqerL/

以下是我在使用 Mig 的建议后现在在我的项目中使用的内容（我没有在 js fiddle 中包含所有 mixin。它们用于前缀）。它有所改进，但在 Safari 上仍然存在错误。

$base: 9.6px;

.scroll-animation {
  position: absolute;
  width: 100%;
  height: rem(41);
  bottom: rem(24);
  @include flexbox;
  @include justify-content(center);

  &:focus {
    outline: none;
  }

  .chevron {
    position: absolute;
    width: $base * 3.35;
    height: $base * .3;
    opacity: 0;
    @include transform(scale(.3));
    @include animation-name(move-chevron);
    @include animation-duration(3.15s);
    @include animation-timing-function(linear);
    @include animation-iteration-count(infinite);
  }

  .chevron:first-child {
    @include animation-delay(0.28s);
  }

  .chevron:nth-child(2) {
    @include animation-delay(0.66s);
  }

  .chevron:before, .chevron:after {
    content: '';
    position: …

当使用 Transform 属性对两个图像进行动画处理时，是否可以让 CSS 滑块循环浏览两个图像translateX？

我面临几个问题：

1. 我似乎无法显示第二个图像，即使它在 HTML 中，除非我使用position: absolute，然后它对overflow: hidden父级不起作用？

2. 如何重置第一张图像以返回到开头以重新开始？

注：动画速记中，动画持续2.5秒，初始延迟3秒。

我只想对属性执行此操作，translateX因为我想要 60FPS 的平滑度（完成后将完成translate3d，但为了使代码更易于阅读，我使用了 translateX）。我不想动画margin: left或left财产等。

任何帮助都会很棒。

代码如下或链接到 Codepen：https ://codepen.io/anna_paul/pen/ZEJrvRp

body {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
}

.container {
  width: 500px;
  height: 333px;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
}

.image {
  display: block;
}

.hero-image-1 {
  transform: translateX(0);
  animation: slide-out-image-1 2.5s 3s cubic-bezier(0.54, 0.12, 0.44, 1) …