CSS 3D - rotate旋转90度看不到的原理 和 解决方法

原理:

旋转元素的坐标有三个 :X(向右),   Y(向左) ,   Z(向电脑屏幕的你)

当没有位移旋转元素时,元素 Z 坐标也会同着一起旋转 ,当一个物品旋转到90度时,我们只能看到它的厚度,而div元素是没有厚度的,所以就会看不到 。

解决:

可以在旋转后加上位移,则 意味你的视角也会发生变化 , 如同一架飞机从你眼前飞过 ( 左右方向 ) ,可以看到 其侧边的内容 。 这就是元素旋转90度加上位移就由消失到显示的原因 。

posted @ 2020-08-13 18:10  武卡卡  阅读(1179)  评论(0编辑  收藏  举报