1)三维坐标系
x轴
y轴
z轴:垂直屏幕的方向,到眼睛这个方向是正值。
2)透视(视距)perspective
作用:好比,进入3d电影放映大厅,带上3d眼镜,坐到合适的位置(第1排还是最后1排)。
注意:
1)如果不设置透视,不能开启3d空间。
2)透视的值是px。
3)透视属性加给,被观察元素的父级元素。
3)3d位移
translateX()
translateY()
translateZ(),往脸这个方向是正值。
4)3d旋转
沿着x轴旋转:【耍单杠】,transform:rotateX(度数);
1)确定x轴的位置
2)确定旋转的方向(正值角度的方向、负值角度的方向)--左手准则
沿着y轴旋转:【钢管舞】,transform:rotateY(度数);
1)确定y轴的位置
2)确定旋转的方向(正值角度的方向、负值角度的方向)
沿着z轴旋转:【抽奖转盘】
5)3d呈现【******】transform-style:preserve-3d;
作用:让子元素保持3d效果。
用法:加给父元素。
【1】翻转两面盒子
html结构:
1)父盒子中有2个子盒子(前面、后面)
2)2个子盒子要摞起来(定位,前面盒子要在最上面)
3)2个子盒子要背对背(后面盒子沿着y轴旋转180度,保留子元素的3d效果)
4)翻转父盒子(沿着y轴旋转180度)
【2】3d导航栏
html结构:
1)父盒子中有2个子盒子(前面、下面)
2)2个子盒子要摞起来(定位,前面盒子要在最上面)
3)下面盒子要【趴着】(沿着x轴旋转-90度),
再跟前面盒子一起摆放成L形(前面盒子沿z轴移动高度的一半,下面盒子沿y轴移动高度的一半)
4)旋转父盒子(鼠标悬浮父盒子时,沿着x轴旋转90度)
【3】旋转木马
html结构:
1)父盒子中有6个子图片盒子
2)6个图片盒子摞起来(定位)
3)6个图片盒子围成一圈(注意:保留子元素的3D效果)
1》第1张图片盒子,沿着z轴移动300px。
2》第2张图片盒子,先沿着y轴旋转60度,然后沿着z轴移动300px。
3》第3张图片盒子,先沿着y轴旋转120度,然后沿着z轴移动300px。
4》第4张图片盒子,先沿着y轴旋转180度,然后沿着z轴移动300px。
5》第5张图片盒子,先沿着y轴旋转240度,然后沿着z轴移动300px。
6》第6张图片盒子,先沿着y轴旋转300度,然后沿着z轴移动300px。
4)不停地旋转父盒子(跳钢管舞)
使用动画
1)动画序列
初始状态,0%,沿着y轴旋转0度
结束状态,100%,沿着y轴旋转360度
2)使用动画
无限播放
鼠标悬浮父盒子时,暂停动画 |
|