3D动画transform:rotate.box{width:300px;高度:300px;边距:200px自动;背景颜色:天蓝色;transform:rotate(45deg);}/*rotadefault是绕rotateZ轴旋转的,那我们要看立体效果,是不是要换轴呢?我们还可以绕X轴和Y轴旋转盒子。Y轴旋转是不是有点像我们要翻书?然后打开书,它是不是绕着我们的Y轴旋转?*/所以如果盒子绕Y轴旋转的话,一般是看不到立体效果的。要想看到立体效果,必须要有景深(近、大、小的概念)透视:npx;从盒子的远处观察,并定义视角。一般是添加到父盒中,在父盒中观察子盒立体效果的合适距离一般是600px-1000px,1000px大约20厘米的距离差不多。透视原点默认情况下,假定观看者的视线与应用的透视元素相交于元素的中心。就术语而言,这意味着“消失点”位于元素的中心。可以通过perspective-origin来修改消失点的位置。该属性类似于transform-origin,可以接受x/y坐标值(带关键字top,left.right.bottom),百分比或长度值。当为元素定义perspective-origin属性时,当为元素定义perspective-origin属性时,其子元素将获得透视效果,而不是元素本身,它与perspective属性一起使用,仅影响3D变换元素
