Displacement(Transform)translateX(x)定义一个3D变换，仅使用值X轴translateY(y)定义一个3D变换，只使用Y轴的值translateZ(z)定义一个3D变换，只使用Z轴的值以上API的值分别表示位移相对到x、y和z轴。下面的例子是位移到z轴的例子：这里需要注意的是，为了看到位移的效果，需要在父容器中添加如下内容属性：.d3-wrap{transform-style:preserve-3d;视角：500；/*设置查看元素的视图*/-webkit-perspective:500;}当为元素定义透视属性时，其子元素将获得透视效果，而不是元素本身代码如下：.d3-wrap{位置：相对；宽度：300px；高度：300px；边距：120px自动；变换样式：保留3d；视角：500；-webkit视角：500；变换：旋转X（0）旋转Y（45度）；transform-origin:centercenter;}.transformZ{宽度:200px;高度：200px；背景色：#06c；过渡：变换2s；动画：transformZ6s无限；}@keyframestransformZ{0%{transform:translateZ(100px);}100%{转换：translateZ(0);}}3D缩放scaleX(x)给定一个X轴的3D缩放变换值scaleY(x)给定一个Y轴的3D缩放变换值scaleZ(x)给定一个Z轴的3D缩放变换值，缩放设置和上面类似，这里就不过多介绍了。理论上，上面三种常见的变换就足够了。值得注意的是，如果我们想让元素呈现出3D效果，下面这些不可忽视的API也是非常重要的：2.CSS33D应用场景CSS3D主要用于网站的交互和模型效果，比如：3D轮播图3D产品介绍室内3D模拟h53D活动页面，典型的是某年淘宝年终总结H53D数据可视化成3D模型图其实如果熟悉css3D，一些Basic3D模型完全可以用css绘制。3、CSS33D实现立方体的核心思想是用6个面拼接在一起，通过设置rotate和平移来调整彼此之间的位置，如下：具体代码如下：.container{position：相对的;宽度：300px；高度：300px；边距：120px自动；变换样式：保留3d；/*使其更立体*/transform:rotateX(-30deg)rotateY(45deg);变换原点：150px150px150px；动画：无限旋转6s;}.container.page{position:absolute;宽度：300px；高度：300px；文本对齐：居中；行高：300px；颜色：#fff；background-size:cover;}.container.page:first-child{background-image:url(./my.jpeg);背景色：rgba(0,0,0,.2);}.container.page:nth-child(2){transform:rotateX(90deg);变换原点：00；过渡：变换10s；背景颜色：rgba（179、15、64、0.6）；背景图片：url(./my2.jpeg);}.container.page:nth-child(3){transform:translateZ(300px);背景色：rgba(22,160,137,0.7)；背景图片：url(./my3.jpeg);}.container.page:nth-child(4){变换：rotateX(-90deg);变换原点：-300px300px；背景色：rgba(210,212,56,0.2)；背景图片：url(./my4.jpeg);}.container.page:nth-child(5){transform:rotateY(-90deg);变换原点：00；背景色：rgba(201,23,23,0.6)；background-image:url(./my5.jpeg);}.container.page:nth-child(6){transform:rotateY(-90deg)translateZ(-300px);变换原点：0300px；背景色：rgba(16,149,182,0.2)；背景图片：url(./my6.jpeg)；}html结构A