CSS3中的3D效果

CSS3中的3D效果

1.rotateX()方法（围绕其在一个给定度数X轴旋转的元素）

div{ width:100px;
height:75px;
 background-color:red; 
 border:1px solid black;
  transition: all 5s; }
  div:hover{ transform:rotateX(-180deg);
   -webkit-transform:rotateX(-180deg); /* Safari and Chrome */ }

2.rotateY()方法（围绕其在一个给定度数Y轴旋转的元素）

3.rotateZ()方法（围绕其在一个给定度数Z轴旋转的元素 默认值）

在这里插入代码片

4.景深：perspective:value;离屏幕多远的距离去观察元素，值越大幅度越小。

在这里插入代码片

5.transform-style属性规定如何在3D空间中呈现被嵌套的元素。
preserve-3d表示3D透视