2D空间和3D空间
2D：x 、y
3D：x、y、z
可以使用transform属性将HTML元素在3D空间内
一个就简单的例子
<div> ???<img src="lufei.jpg"></div>@-webkit-keyframes rotate{ ?100%{transform:rotate(60deg);}}img{ ?-webkit-animation-name:rotate; ?-webkit-animation-durction:2s;}这样的话 图片只是变扁了，看不到透视效果，想要看到透视效果需要在父元素上加上perspective属性，也就是说把这个div看作一个3D画面
perspective：1000px； 视点和3D画面的距离，距离越小透视就越明显。
<div> ???<img src="lufei.jpg"></div>div{ ?perspevtive:500px;}@-webkit-keyframes rotate{ ?100%{transform:rotate(60deg);}}img{ ?-webkit-animation-name:rotate; ?-webkit-animation-durction:2s;}perspective-origin：right top；改变视点的位置
<div> ???<img src="lufei.jpg"></div>div{ ?perspevtive:500px; ?perspective-origin:right top;}@-webkit-keyframes rotate{ ?100%{transform:rotate(60deg);}}img{ ?-webkit-animation-name:rotate; ?-webkit-animation-durction:2s;}transform-origin;x y z; 旋转的基准点
<div> ???<img src="lufei.jpg"></div>div{ ?perspevtive:500px;}@-webkit-keyframes rotate{ ?100%{transform:rotate(60deg);}}img{ ?-webkit-animation-name:rotate; ?-webkit-animation-durction:2s; ?transform-origin:center center 100px;}backface-visibility:设置元素背面是否可见，默认visible
<div> ???<img src="lufei.jpg"></div>div{ ?perspevtive:500px;}@-webkit-keyframes rotate{ ?100%{transform:rotate(60deg);}}img{ ?-webkit-animation-name:rotate; ?-webkit-animation-durction:2s; ?transform-origin:center center 100px; ?backface-visibility：hidden； ????背面隐藏}3D旋转（rotate3D）
rotate3D（1，1，1，360deg）；
前三个参数是在3维空间中的一个点x轴1，y轴1 z轴1 ，后面的360deg是围绕这个这个点360°旋转
3D移动（translate3D）
3D缩放（scale3D）
transform-style：
flat：默认值，子元素将不保留其3D位置
preserver-3D：子元素将保留其3D位置。
Css3 ?3D转换
原文地址：https://www.cnblogs.com/xiaowie/p/9900167.html