标签: css-transforms

我有一个div,我点击它来拖动它.一旦它出现在某个区域,它就会通过以下方式激活其位置:

$("#wheel1").animate({left: "200px", top: "100px"});

我也可以用它来制作动画:

@-webkit-keyframes wheel1 {
    0% {
    }
    100% {
        -webkit-transform: translate(200px, 100px);
    }
}

不同的是; 使用jQuery,它从文档左侧动画到200px.使用CSS3,它可以从放置它的地方动画200px(这很糟糕)

有没有办法从文档的左上角开始制作CSS3动画,就像jQuery一样？我试过改变变换原点和其他一些设置而没有运气.

我知道要在CSS中创建一个基本箭头,我可以这样做:

<div class="arrow-button">
    <span class="arrow-tip-container">
         <span class="arrow-tip"></span>
    </span>
</div>

然后我要做的就是旋转并定位容器,然后填充箭头和BAM!那里;一个甜蜜的箭头:http://jsfiddle.net/uF69S/

但是,我想要一个箭头,其中尖端实际上是120°角,那么使用CSS变换或两个不同的容器可以实现这种效果吗？也许歪斜和旋转？

我想创建这个箭头:

------------\
|            \
|            /
------------/

请注意,箭头不是 90°.

注意: 我知道边框三角形可用于制作任何三角形角度,但它们不支持Firefox,Opera或IE中的渐变,而Firefox,Opera和IE可以支持变换(以某种方式).

我已经得到了一组简单的卡片,我需要点击它.问题是当变换完成后,背面(蓝色侧)消失.它会在动画中显示回到正面.

我知道这可能是一个简单的解决方案而且很简单,但可能不是.我可以在Chrome(Canary)和Safari中复制结果.

我已经尝试了一些背面可见性的东西,它可以让它不会消失但是我可以用jQuery监听器点击它并将它翻转回前面.

这是小提琴:http: //jsfiddle.net/9gPfz/1/

这是CSS:`.equipment-card-holder {-webkit-perspective:1000; }

.equipment-card {身高:250px; 宽度:222px; 背景:#fff; box-shadow:0 1px 5px rgba(0,0,0,0.9); 向左飘浮; 保证金:0 9px 30px;

-webkit-transform-style: preserve-3d;


-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; 
}

.equipment-card .card-face{
    -webkit-backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    }

.equipment-card .card-front{
    -webkit-transform: rotateY(0deg);
    }

.equipment-card .card-back{
    -webkit-transform: rotateY(180deg);
    background-color: lightBlue;
    }

.equipment-card.flipped{
    -webkit-transform: rotateY(180deg);
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);

    }

.span12{

width: 960px;
}
}`

您将需要一个基于webkit的浏览器,用于我正在使用的供应商前缀.

我试图只使用CSS制作下面的形状.我知道使用图像或SVG实现这种形状会容易得多,但我试图用CSS来实现它的概念验证.

以下是我到目前为止尝试过的代码.它通过使用产生钻石形状,transform: rotate(45deg)但是对角线具有相同的长度,而我需要的形状具有一个非常长的对角线而另一个非常短.

.separator{
    background: #555;
    top: 40px;
    padding-top: 0px;
    margin: 0px 40px;    
    height: 100px;
    width: 100px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

小提琴演示

是否可以使用CSS创建我需要的形状？

_{注:一个类似的问题早有人问及关闭/删除"太宽泛",因为它并没有表现出任何编码的尝试.根据这个元讨论发布一个新问题并自我回答.请随意使用备用解决方案(或)编辑问题,以使其对未来的读者更有用.}

虽然创造了一些变革在我的网站的一些对象,我发现一个对象被赋予变换特性,following.If skew(20deg,45deg)会比与其他对象的不同skewX(20deg)和skewY(45deg).

有人能解释我为什么会这样吗？

.skew {
  height:10em;
  width:10em;
  background:red;
  margin:auto;
}

#first {
  transform:skew(20deg,45deg);
}

#second {
  transform:skewX(20deg) skewY(45deg);
}

<div class="skew" id="first"> skew(20deg,45deg) </div> <hr>
<div class="skew" id="second"> skewX(20deg) skewY(45deg) </div>

更新: skew语法短.我如何能实现我有同样的效果skewX(),并skewY()采用skew()短语法.

我在摆弄这个mix-blend-mode财产。一切正常，直到我transform: perspective(100px)在页面上的任何地方添加类似或任何其他3d转换之类的东西，然后完全中断。应用了转换，但是混合模式消失了。

我在chrome和firefox以及linux和Windows上进行了测试，并且到处都是相同的，但是在另一台计算机上它运行良好（我不记得它拥有并正在运行ubuntu的chrome版本）。

那是可以用CSS修复的东西，还是仅仅是硬件/ GPU驱动程序问题？

我放入background-blend-mode标签是因为该mix-blend-mode标签尚不存在，但是奇怪的是此属性工作得很好，并且不会被转换破坏。

这是我要实现的代码库：http ://codepen.io/vnenkpet/pen/avWvRg

闪电不应带有闪烁的黑色背景，而应与页面背景平滑融合。

编辑：

我刚刚发现它实际上可以在Firefox中运行。因此，这是一个chrome bug吗？据我所知，3D变形不应破坏混合模式...

我正在向我的网页添加一些SVG路径,但是我对Firefox 43.0有困难.看来,当我申请transform: scale(0.1)我的路径时,Firefox不会更新边界客户端矩形(通过getBoundingClientRect())

这是变换前路径的截图,以及正确的边界矩形:

这里应用了变换,视觉清晰地位于边界框之外:

相比之下,Chrome是按预期更新其边界框.(注意约束比例.)

Chrome或Edge上不存在此问题.我确实从2012年发现了这个旧版本的bug,该版本说明问题已在版本12.0中修复,文档说明:

从Gecko 12.0(Firefox 12.0/Thunderbird 12.0/SeaMonkey 2.9)开始,在计算元素的边界矩形时会考虑CSS变换的效果.

......似乎不是真的.对于其他浏览器,我将我的圆圈缩小到其原始大小的10%,然后计算客户端矩形的坐标偏移量,使其居中于原始的100%比例位置.但是,由于在Firefox中进行转换后客户端矩形没有更新,因此它会搞乱计算.

我如何解决这个问题？

具有属性似乎有点反直觉,这些属性本身就是关键:值对,被组合在一起.特别是因为它们中的大多数都是完全不同的,只要你知道如何写它,它们仍然可以同时使用.如果我不清楚我在说什么,我的问题是这个.为什么如下:

transform: rotate(40deg) scaleX(1,5) translate(-10px, 20px);

不是这样写的:

rotation: 40deg;
scaleX: 1.5;
translate: -10px 20px;

这样,每个属性都可以自己操作,而无需跟踪兄弟值.W3必须有一个很好的理由选择这种方法,有人知道吗？

我有一个图像,根据概述/详细状态更改其高度.它必须是背景图像,background-size: cover以确保容器始终被覆盖.

由于转换需要具有高效性,我认为除了在内部元素transform: scaleY(0.5)上使用包装元素和相应的转换之外别无其他方法transform: scaleY(2),即取消缩放效果.

在开始和结束时,数学是正确的.但是,过渡看起来是错误的.我准备了一个小小提琴来说明出了什么问题:

Codepen - Fiddle

正如您所看到的,即使是线性的,转换也不会完全相互抵消.我想有一个潜在的数学问题,但我似乎无法找到解决方案.

我试图阻止浏览器重新绘制以提高使用 CSS 动画的大型单页应用程序的性能。

如果我有一个对其:hover { transform: scale(...) }有影响的元素，我可以通过使用will-change: transform和/或此处transform: translateZ(0)提到的来防止重绘。

但是一旦我transition向该元素添加 a ，许多元素就会重新开始重新绘制。

这是一个演示代码笔和它的 gif

唯一可以防止这种重绘的方法是将其他元素放在 DOM 顺序中的动画元素之前，或者将动画元素的 z-index 索引在其他元素之上。但是对于复杂的单页应用程序，我不想对任何只需要悬停过渡的元素的 z-index 进行微观管理。

任何其他想法或参考？我还没有transition在别处讨论过这个与s 相关的特定问题。