一、三维坐标系 和 透视
透视 perspective
- 网页产生3D效果需要透视
- 模拟人类的视觉位置,可认为安排一只眼睛去看
- 透视也称为视距:视距就是人的眼睛到屏幕的距离
- 越近成像越大,越远成像越小;即Z轴越大,成像越大
- 透视的单位是像素
- 透视写到3D元素的父盒子上
二、3D位移 translate3d(x,y,z)
2.1 语法
- translate3dX(); 左右
- translate3dY(); 上下
- translate3dZ(); 内外 Z轴上一般用精确单位(px)
- translate3d(x,y,z); xyz不能省略 如果没有就写0
三、3D旋转rotate3d
3.1 语法
- transform:rotateX(ndeg); 沿着x轴旋转n度;正值:后仰;负值:前倾
- transform:rotateY(ndeg);
- transform:rotateZ(ndeg);
- transform:rotate(x,y,z,ndeg);沿着自定义轴旋转 (1,1,0)沿着对角线
3.2 旋转方向:左手准则
四、3D呈现 transform-style
- 控制子元素是否开启三维立体环境
- transform-style:flat 子元素不开启3d立体空间 默认的
- transform-style:preserve-3d;子元素开启立体空间
- 代码写给父级,影响的是盒子
五、应用
- 移动写在旋转前面 transform: translateY(15px) rotateX(-90deg);
旋转木马
body {
perspective: 1200px;
}
.box {
transform-style: preserve-3d;
position: relative;
margin: 200px auto;
height: 200px;
width: 300px;
animation: dog1 5s infinite linear;
}
.box div {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url('img/dog.jpg');
}
/* 现移动 再旋转 */
.box div:nth-child(1) {
transform: translateZ(300px);
}
.box div:nth-child(2) {
transform: rotateY(-60deg) translateZ(300px);
}
.box div:nth-child(3) {
transform: rotateY(-120deg) translateZ(300px);
}
.box div:nth-child(4) {
transform: rotateY(-180deg) translateZ(300px);
}
.box div:nth-child(5) {
transform: rotateY(-240deg) translateZ(300px);
}
.box div:nth-child(6) {
transform: rotateY(-300deg) translateZ(300px);
}
@keyframes dog1 {
0% {}
100% {
transform: rotateY(360deg);
}
}
.box:hover {
animation-play-state: paused;
}