一、CSS3-3D转换
1.3D
特点:近大远小,物体和面遮挡不可见
1.1三维坐标系
x 轴:水平向右 – x 轴右边是正值,左边是负值
y 轴:垂直向下 – y 轴下面是正值,上面是负值
z 轴:垂直屏幕 – 往外边的是正值,往里面的是负值
2.3D移动tranlate3d
2.1 语法
transform:translate3d(x,y,z);
transform:translateZ(z);
2.2用法
.box3 {
/* 向里面移动100 */
transform: translateZ(-100px);
}
.box4 {
/* 向右移动50,向下移动50,向外移动50 */
/* translate3d */
transform: translate3d(50px, 50px, 50px);
}
.box5 {
/* 向里面移动100 */
/* translate3d里面的值不能省略,没有就写0 */
transform: translate3d(0, 0,-100px);
}
2.3总结
1.translate3d里面的3d要小写。
2.translate3d后面的值一定是三个值(x,y,z),不能省略,没有的就写0,且顺序不能颠倒。
3.3d的z值一般都是精准的像素值。
4.z值为正数就是往外面移动,为负数就是往里面移动
3.透视perspective
1.产生3d效果必须写透视。
2.透视就是视距,即人眼到屏幕的距离。
3.近大远小
4.透视prespective的单位是像素
5.透视写在被观察元素的父盒子上。
4.3D转换之移动—translatedZ
给父元素加perspective后,再给子元素添加translateZ会产生近大远小。
body {
/* 人眼距屏幕500px */
perspective: 500px;
}
.box1 {
/*变小*/
transform: translateZ(-100px);
}
.box2 {
/*变大*/
transform: translateZ(100px)