标签: css-transforms

编辑:@Archer的答案似乎解决了这个问题.(请把他投票给我,因为我没有足够的积分去做).
要了解有关该错误的更多信息,请单击此处:http://www.viget.com/inspire/webkit-transform-kill-the-flash/

我的问题不容易解释.我在jsfiddle上编了一个测试用例.您可以在本文底部找到该链接.

在点击演示链接之前,请注意以下事项:

请确保您使用的是谷歌浏览器.(因为CSS中的-webkit前缀).

第一次单击橙色按钮时要注意.在动画开始之前你应该看到一种短暂的闪光.当您再次尝试(点击重置按钮后)一切正常,没有闪烁的屏幕.但是,如果清除浏览器缓存(CTRL-SHIFT-DEL),关闭浏览器并重新加载页面,打嗝就会再次出现.
我希望我能清楚地解释清楚.

演示:http: //jsfiddle.net/NKQNX/14/

(抱歉我的拼写,英语不是我的第一语言)

我不知道它这是正确的做法,但我要旋转的元素,
我知道transform: rotate(90deg)和transition-property:all会的工作,但我并不想过渡all
什么transition-property我应该使用,以及是否有更好的方法来创建一个旋转动画？

我在这里有点迷失,我正在测试Windows 8 Release Preview附带的IE10(10.0.9200.16384),我现在很难过.令我烦恼的一件事是,IE似乎没有正确处理嵌套的3D转换.请看这个小提琴:

http://jsfiddle.net/uUHdF/1/

有两个彩色的div,一个红色的,一个绿色的旋转和翻译,使它充当长方体的顶部,这个长方体本身也旋转和平移(注意我不能使用变换原点旋转只是因为它在Webkit中是错误的...以防万一可能是可能的修复的一部分).它应该如下所示:

它与Chrome和Firefox一样正常运行,但在IE10中,绿色div缺失:

有人知道我是否遗漏了某些东西,或者它是否是一个错误？

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

我知道这可能是一个简单的解决方案而且很简单,但可能不是.我可以在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

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