这里写目录标题

一、translate二、perspective1.perspective-origin2.transform-style: prerve-3d3.backface-visibility: hidden;三、使用规则

一、translate

translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translatex()： 指定对象X轴（水平方向）的平移
translatey()： 指定对象Y轴（垂直方向）的平移
translatez()： 指定对象Z轴的平移
translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

transform: translateX(50%);/*相对于本身当前位置右移50%宽度*/transform: translateZ(100px);/*如果设置了perspective属性，那么元素会相对于屏幕逐渐向我们“靠近”，即放大*/

二、perspective

指定透视距离，在相机拍照中叫景深，也可以叠加
放在父级上，即拥有“第二者视角”
放在自身、兄弟身上，即以“自己的视角”

真爱如血好看么perspective: 500px;/*相当于在z轴500px像素的位置观察*/

1.perspective-origin

指定透视点的位置，我们的视角所在方位

body{    perspective: 800px;    perspective-origin: 300px 100px;}.box{    position: absolute;    top: 200px;    left: 200px;    width: 200px;    height: 200px;    border-radius: 50%;    background-color: chartreu;}.content{    width: 200px;    height: 200px;    background-image: url(clock.png);    background-size: cover;    transform: translateZ(100px);}<div class="box">    <div class="content"></div></div>

五泄风景区

当我们设置视角距离屏幕800px，从位置（300px，100px）的位置观看，如图（我们视线经过）

我们是可以看见立体效果的，即看到了后面的一层绿布

外企hr.box{    position: absolute;    top: 200px;    left: 200px;    width: 200px;    height: 200px;    border-radius: 50%;    background-color: chartreu;    transform: rotateY(45deg);}

但是当我们将父元素旋转后，发现后面的绿布又看不到了

这就是正常情况下浏览器的渲染机制——2d

2.transform-style: prerve-3d

当我们在当前父级加上transform-style: prerve-3d该属性时，就能渲染出正常3d效果

.box{    position: absolute;    top: 200px;    left: 200px;    width: 200px;    height: 200px;    border-radius: 50%;    background-color: chartreu;    transform: rotateY(45deg);    transform-style: prerve-3d;}

注意：perspective和trans五字对联form-style: prerve-3d任意一个被设置，在没有其他参照物情况下，子孙将会将设置该属性的元素作为参照物（例如定位）

3.backface-visibility: hidden;

当3d效果时旋转到背面，该属性设置是否显示背面。

三、使用规则

body{    persp给自己一个ective: 300px;}div{    width: 150px;    height: 150px;    background-color: chartreu;}

body{    perspective: 600px;}div{    width: 150px;    height: 150px;    background-color: chartreu;}

在元素没有移动时，不管从近，远观察，其大小不变。（注：我们最终关注的始终是屏幕）

body{    perspective: 300px;}div{    position: absolute;    top: 200px;    left: 200px;    width: 150px;    height: 150px;    background-color: chartreu;    transform: translateZ(100px);}

此时我们设置元素沿z轴向“我们”靠近100px后

那么元素相对于在原屏幕上的大小就发生了改变

body{    perspective: 300px;}div{    position: absolute;    top: 200px;    left: 200px;    width: 150px;    height: 150px;    background-color: chartreu;    transform: translateZ(-100px);}

此时将元素“远离”100px

那么元素最终在屏幕上将会变小

其远离类似：两小儿辩日“近者大而远者小”

本文地址：https://blog.csdn.net/xun__xing/article/details/107461456