TransformtranslateX(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{position:relative;宽度：300px；高度：300px；边距：120pxauto；转换样式：preserve-3d；透视：500；-webkit-perspective：500；转换：rotateX(0)rotateY(45deg)；transform-origin：centercenter；}。transformZ{width:200px;height:200px;background-color:#06c;transition:transform2s;animation:transformZ6sinfinite;}@keyframestransformZ{0%{transform:translateZ(100px);}100%{transform: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，一些基本的3D模型可以用css绘制。3、CSS33D实现立方体的核心思想是用6个面拼接在一起，通过设置rotate和平移来调整彼此之间的位置，具体代码如下：.container{position:relative;width:300px;height:300px;margin:120pxauto;transform-style:preserve-3d;/*让它更立体*/transform:rotateX(-30deg)rotateY(45deg);transform-origin:150px150px150px;动画：rotate6sinfinite;}.container。page{position:absolute;width:300px;height:300px;text-align:center;line-height:300px;color:#fff;background-size:cover;}.container.page:first-child{background-image:url(./my.jpeg);background-color:rgba(0,0,0,.2);}.container.page:nth-child(2){transform:rotateX(90deg);transform-origin:00；过渡：transform10s；背景颜色：rgba（179,15,64,0.6）；背景图像：url（./my2.jpeg）；}.container.page：nth-??child（3）{transform：translateZ(300px);background-color:rgba(22,160,137,0.7);background-image:url(./my3.jpeg);}.container.page:nth-child(4){transform:rotateX(-90deg);变换-origin:-300px300px;background-color:rgba(210,212,56,0.2);background-image:url(./my4.jpeg);}.container.page:nth-child(5){transform:rotateY(-90deg);transform-origin:00;background-color:rgba(201,23,23,0.6);background-image:url(./my5.jpeg);}.container.page:nth-child(6){transform:rotateY(-90deg)translateZ(-300px);transform-origin:0300px;background-color:rgba(16,149,182,0.2);背景-image:url(./my6.jpeg);}html结构A