css深入剖析transform的translate和perspective
这里写目录标题
一、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: chartreuse;
}
.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)的位置观看,如图(我们视线经过)
我们是可以看见立体效果的,即看到了后面的一层绿布
.box{
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: chartreuse;
transform: rotateY(45deg);
}
但是当我们将父元素旋转后,发现后面的绿布又看不到了
这就是正常情况下浏览器的渲染机制——2d
2.transform-style: preserve-3d
当我们在当前父级加上transform-style: preserve-3d该属性时,就能渲染出正常3d效果
.box{
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: chartreuse;
transform: rotateY(45deg);
transform-style: preserve-3d;
}
注意:perspective和transform-style: preserve-3d任意一个被设置,在没有其他参照物情况下,子孙将会将设置该属性的元素作为参照物(例如定位)
3.backface-visibility: hidden;
当3d效果时旋转到背面,该属性设置是否显示背面。
三、使用规则
body{
perspective: 300px;
}
div{
width: 150px;
height: 150px;
background-color: chartreuse;
}
body{
perspective: 600px;
}
div{
width: 150px;
height: 150px;
background-color: chartreuse;
}
在元素没有移动时,不管从近,远观察,其大小不变。(注:我们最终关注的始终是屏幕)
body{
perspective: 300px;
}
div{
position: absolute;
top: 200px;
left: 200px;
width: 150px;
height: 150px;
background-color: chartreuse;
transform: translateZ(100px);
}
此时我们设置元素沿z轴向“我们”靠近100px后
那么元素相对于在原屏幕上的大小就发生了改变
body{
perspective: 300px;
}
div{
position: absolute;
top: 200px;
left: 200px;
width: 150px;
height: 150px;
background-color: chartreuse;
transform: translateZ(-100px);
}
此时将元素“远离”100px
那么元素最终在屏幕上将会变小
其远离类似:两小儿辩日“近者大而远者小”
本文地址:https://blog.csdn.net/xun__xing/article/details/107461456
上一篇: Javaweb Cookie设置和处理
下一篇: 简单工厂模式