扫码关注官方订阅号
.ball_1里的rotateX（-90）有IE就不显示，删掉图片就出来，但是rotate不是兼容IE10+吗？大神帮我看看，是不是我写的有问题
下载
欢迎选择我的课程，让我们一起见证您的进步~~
rotateX(-90deg) 的含义是绕 X 轴顺时针旋转 90 度。
rotateX(-90deg)
设想这个元素是三维空间的一个对象，而我们在屏幕上看到的只是这个想象之中的三维对象的投影。旋转 90 度之后，它就在三维空间垂直于屏幕了。所以在没有 perspective 的情况下，它在屏幕的投影是不是什么也没有? 只有被透视的情况下，它才可能在屏幕上留下投影。然而 IE 10 和 11 并不支持采用 CSS perspective 属性的方式添加透视效果，因此什么也看不到。
perspective
这里真正的问题是 IE 10/11 不支持 CSS perspective 属性，只支持把 perspective 写在 transform 里面。如下所示。
transform
.element { transform: perspective(233px) translateY(50px) rotateX(90deg) }
因为CSS3很多新增属性支持性能很差，transform支持IE9+，不过你可以加前缀-ms-
支持的意思是你要加上-ms-才能使用
-ms-
-ms-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);都加上也不行!
把rotateX(-90deg)去掉，就出来了!
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
4
860
收藏
rotateX(-90deg)的含义是绕 X 轴顺时针旋转 90 度。设想这个元素是三维空间的一个对象，而我们在屏幕上看到的只是这个想象之中的三维对象的投影。旋转 90 度之后，它就在三维空间垂直于屏幕了。所以在没有 perspective 的情况下，它在屏幕的投影是不是什么也没有? 只有被透视的情况下，它才可能在屏幕上留下投影。然而 IE 10 和 11 并不支持采用 CSS
perspective属性的方式添加透视效果，因此什么也看不到。这里真正的问题是 IE 10/11 不支持 CSS
perspective属性，只支持把 perspective 写在transform里面。如下所示。因为CSS3很多新增属性支持性能很差，transform支持IE9+，不过你可以加前缀-ms-
支持的意思是你要加上
-ms-才能使用-ms-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
都加上也不行!
把rotateX(-90deg)去掉，就出来了!