目录
1.translateZ 与 perspecitve 的区别
3D转换
⼀、 认识 3D 转换
1.3D 的特点
- 近⼤远⼩
- 物体和⾯遮挡不可⻅
2.三维坐标系
- x 轴:⽔平向右 -- 注意:x 轴右边是正值,左边是负值
- y 轴:垂直向下 -- 注意:y 轴下⾯是正值,上⾯是负值
- z 轴:垂直屏幕 -- 注意:往外边的是正值,往⾥⾯的是负值
⼆、3D 转换
1. 3D 转换知识要点
- 3D 位移:translate3d(x, y, z)
- 3D 旋转:rotate3d(x, y, z)
- 透视:perspctive
- 3D呈现 transfrom-style
2. 3D 移动 translate3d
- 3D 移动就是在 2D 移动的基础上多加了⼀个可以移动的⽅向,就是 z 轴⽅向
- transform: translateX(100px):仅仅是在 x 轴上移动
- transform: translateY(100px):仅仅是在 y 轴上移动
- transform: translateZ(100px):仅仅是在 z 轴上移动
- transform: translate3d(x, y, z):其中x、y、z 分别指要移动的轴的⽅向的距离
- 注意:x, y, z 对应的值不能省略,不需要填写⽤ 0 进⾏填充
3.语法
transform: translate3d(x, y, z)
4.代码演示
transform: translate3d(100px, 100px, 100px)
/* 注意:x, y, z 对应的值不能省略,不需要填写⽤ 0 进⾏填充 */
transform: translate3d(100px, 100px, 0)
三、透视 perspective
1.知识点讲解
- 如果想要⽹⻚产⽣ 3D 效果需要透视(理解成 3D 物体投影的 2D 平⾯上)
- 实际上模仿⼈类的视觉位置,可视为安排⼀直眼睛去看
- 透视也称为视距,所谓的视距就是⼈的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平⾯成像越⼤,越远成像越⼩
- 透视的单位是像素
2.知识要点
- 透视需要写在被视察元素的⽗盒⼦上⾯
- 注意下⽅图⽚
- d:就是视距,视距就是指⼈的眼睛到屏幕的距离
- z:就是 z 轴,z 轴越⼤(正值),我们看到的物体就越⼤
3.代码演示
body {
perspective: 1000px; }
四、 translateZ
1.translateZ 与 perspecitve 的区别
----**perspecitve 给⽗级进⾏设置,translateZ **给 ⼦元素进⾏设置不同的⼤⼩
五、3D 旋转rotateX
3D 旋转指可以让元素在三维平⾯内沿着 x 轴、y 轴、z 轴 或者⾃定义轴进⾏旋转
1.语法
- transform: rotateX(45deg) -- 沿着 x 轴正⽅向旋转 45 度
- transform: rotateY(45deg) -- 沿着 y 轴正⽅向旋转 45 度
- transform: rotateZ(45deg) -- 沿着 z 轴正⽅向旋转 45 度
- transform: rotate3d(x, y, z, 45deg) -- 沿着⾃定义轴旋转 45 deg 为⻆度
2.代码案例
div {
perspective: 300px; }
img {
display: block;
margin: 100px auto;
transition: all 1s; }
img:hover {
transform: rotateX(-45deg) }
3.左⼿准则
-
左⼿的⼿拇指指向 x 轴的正⽅向
-
其余⼿指的弯曲⽅向就是该元素沿着 x 轴旋转的⽅向
六、3D 旋转 rotateY
1.代码演示
div {
perspective: 500px; }
img {
display: block;
margin: 100px auto;
transition: all 1s; }
img:hover {
transform: rotateY(180deg) }
2.左⼿准则
- 左⼿的拇指指向 y 轴的正⽅向
- 其余的⼿指弯曲⽅向就是该元素沿着 y 轴旋转的⽅向(正值)
七、 3D 旋转 rotateZ
1.代码演示
div {
perspective: 500px; }
img {
display: block;
margin: 100px auto;
transition: all 1s; }
img:hover {
transform: rotateZ(180deg) }
2.rotate3d
- transform: rotate3d(x, y, z, deg) -- 沿着⾃定义轴旋转 deg 为⻆度
- x, y, z 表示旋转轴的⽮量,是标识你是否希望沿着该轴进⾏旋转,最后⼀个标识旋转的⻆度
- transform: rotate3d(1, 1, 0, 180deg) -- 沿着对⻆线旋转 45deg
- transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg
3.代码演示
div {
perspective: 500px; }
img {
display: block;
margin: 100px auto;
transition: all 1s; }
img:hover {
transform: rotate3d(1, 1, 0, 180deg) }
⼋、3D 呈现 transform-style
1.transform-style
-
控制⼦元素是否开启三维⽴体环境
-
transform-style: flat 代表⼦元素不开启 3D ⽴体空间,默认的
-
transform-style: preserve-3d ⼦元素开启⽴体空间
-
代码写给⽗级,但是影响的是⼦盒⼦