标签: css-transforms

我在Linux 64位盒子中使用Chrome 12,但我无法获得以下任何样本:

• http://www.satine.org/research/webkit/snowleopard/snowstack.html
• http://www.marcofolio.net/css/3d_animation_using_pure_css3.html
• http://kevchapman.co.uk/css/webkit-css-perspective-demo/

他们都使用-webkit-perspective,但最终的结果与Safari(Windows XP)中得到的结果有很大不同.毕竟,Chrome支持CSS 3D转换吗？或者支持仍然有限？

谢谢!

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

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

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

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

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

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

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

我目前正在一个新项目中使用Twitter Bootstrap.该项目的主要部分是缩略图库,与他们的示例中的缩略图库完全相同(此处:http://twitter.github.com/bootstrap/components.html#thumbnails).

问题是我目前正在根据他们的EXIF方向数据进行css转换(基本上是旋转)图像.当我应用转换(现在使用-webkit-transform,因为我在Chrome上测试)到a时img,它的父元素保持不变,并且图像"溢出"其容器.

使用Chrome,可以测试此行为,然后转到我之前链接的示例缩略图库,检查其中一个占位符图像并向标记添加style="-webkit-transform: rotate(90deg)属性img.图像溢出li容器元素并中断布局.

有没有办法解决这个问题,让bootstrap处理一个css旋转的图像,好像它原来是这样的？我想过手动设置img标签的高度和宽度,他们的父母会调整,但我不知道在实际渲染之前图像在服务器端呈现的大小,所以这似乎排除了这个做法.

哦,顺便说一下,我知道我可以在服务器端转动,我知道这并不难,我只是非常喜欢在浏览器中这样做,如果可能的话.

有任何想法吗？

谢谢!

编辑:Jaap建议我旋转整个容器,如果不是因为我在缩略图lis中有文本节点,这将完美地工作.旋转容器将使文本显示旋转.

我不知道它这是正确的做法,但我要旋转的元素,
我知道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缺失:

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

我有一个小提琴,你可以玩.在rotateX和rotateY滑块周围移动以查看.最接近你的元素部分较小,而较远的部分较大.如果你翻转它使用

transform:rotateZ(180deg);

它看起来很正确,但我不明白为什么它首先看起来不正确.

更新

如果你看看这个3D立方体就有意义了.立方体的变换原点是立方体的中间.

我正在使用

-webkit-transform: skew(-15deg, 0deg);

歪曲一个div,然后

-webkit-transform: skew(15deg, 0deg);

要纠偏的含文字的孩子.在谷歌浏览器中,倾斜看起来很丑陋和像素化,所以我使用

-webkit-backface-visibility: hidden;

使它看起来不错.现在容器倾斜得非常好,内部文本是"未弯曲的",但文本本身是模糊和丑陋的!(问题仅存在于使用-webkit的chrome中)

演示

有任何想法如何使文字再次清晰？

HTML

<div class="mainBodyItemBox">
    <div class="mainBodyItemImage">
        <img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg">
    </div>
    <div class="mainBodyItemDecorator"></div>
    <div class="mainBodyItemText">PEC Zwolle v FC Groningen Tickets
        <br> <span class="mainBodyItemType">Football</span>
 <span class="mainBodyItemTime"><strong>04 Apr 2014</strong> | 21:00</span>
    </div>
</div>

CSS

.mainBodyItemBox {
    background-color: #f5f5f5;
    display: inline-block;
    font-family: Arial;
    font-size: 12px;
    height: 80px;
    width: 365px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #c9c9c9;
    margin-left: 25px;
    margin-top: 10px;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -moz-transform: skew(-10deg, 0deg); …

我有一个旋转的球体,我有一个div附加的示例可以在这里查看:https://jsfiddle.net/ao5wdm04/ 我计算x和y值并使用translate3d变换放置div ,这非常有效.

我的问题是如何能得到值的rotateX,rotateY和rotateZ或rotate3d转换,因此格"切线"球体表面.我知道立方体网格面向球体中心,所以我假设相对于相机的向外法线向量的旋转向量将包含我需要的值.但我不太清楚如何获得这些.

更新

通过使用欧拉角,我几乎达到了预期的效果,如下所示:https://jsfiddle.net/ao5wdm04/1/但旋转不够大.

我有以下转换,似乎在IE11中不起作用.

是否有替代方案可以让IE在IE11中运行？

transform: translateY(calc(-100% - 5rem))
-ms-transform: translateY(calc(-100% - 5rem))

inb4:抱歉,超长的图片需要超长时间才能加载,如果您不想等待,请点击链接并阅读问题!

所以我正在创建一个网站的原型,我用它制作了一个虚假的3D效果,用鼠标移动了2d图像.当用户点击其中一个三角形以突出显示时,我想使用滤镜模糊.

我的问题是,当我添加模糊时,它在firefox中完全中断.我对chrome中的模糊没有任何问题,但由于某些原因在firefox中,应该居中的背景图像变为右对齐并由其自己的div裁剪,如果我在检查器中更改了背景位置,它会移出障碍区域.

这是Chrome的屏幕截图,然后是我在firefox中获得的内容.

在放弃整个模糊想法的同时,我并不完全不知道该做什么.任何解决方案的想法都是相关的