css3新特性第七章(3D变换)
css新特性第七章(3D变换)
一、3d空间和景深
元素进行 3D 变换的首要操作：父元素必须开启 3D 空间！
使用 transform-style 开启 3D 空间，可选值如下：
- flat ： 让子元素位于此元素的二维平面内（ 2D 空间）—— 默认值
- preserve-3d ： 让子元素位于此元素的三维空间内（ 3D 空间）
景深
何为景深？—— 指定观察者与 z=0 平面的距离，能让发生 3D 变换的元素，产生透视效果，看来更加立
体。
- perspective
- none ： 不指定透视 ——（默认值）
- 长度值 ： 指定观察者距离 z=0 平面的距离，不允许负值。
- perspective 设置给发生 3D 变换元素的父元素！
基础html结构
.outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深 近大远小 必须要设置在父元素上面 */perspective: 150px;}<div class="outer"><div class="inner">3D变换</div></div>
设置 rotateX 旋转效果
代码
.inner {
width: 200px;
height: 200px;
background-color: palegreen;
/* 设置x轴旋转 类似于体操运动员，一直在单杠上面上下 */
transform: rotateX(50deg);
}
设置rotateY 旋转效果
代码
.inner {
width: 200px;
height: 200px;
background-color: palegreen;
/* 设置Y轴旋转 类似于旋转，沿着柱子左右方向 */
transform: rotateY(50deg);
}
总结
我们发现，当我们设置了 perspective 的参数大小会发现，我们数值设置的越小，那么我们看到的z轴面积就越大，改值跟我们眼睛看东西一样，越近对应看到的物体也就越大，数字越小就代表越近，因为只有旋转效果是最好的，位移和缩放是看不出来的，因为没有厚度
二、透视点位置
所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。通常我们不需要跳转透视点位置；
- perspective-origin
- 400px 300px 相对坐标轴往右偏移400px， 往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素）
默认效果
代码
<style>.outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深 近大远小 必须要设置在父元素上面 */perspective: 500px;/* 修改透视点位置 默认是正中央 *//* perspective-origin: 102px 102px; *//* 透视点位置 x 轴代表是右下角 y代表底下蹲下来看 *//* perspective-origin: 400px 300px; */}.inner {width: 200px;height: 200px;background-color: rgb(60, 209, 209,0.7);/* 设置x轴旋转 */transform: rotateX(50deg);/* 设置Y轴旋转 类似于旋转，沿着柱子左右方向 *//* transform: rotateY(50deg); */}</style>
</head>
<body><div class="outer"><div class="inner">3D透视</div></div>
</body>
设置透视点位置
perspective-origin: 400px 300px; 透视点位置 x 轴代表是右下角 y代表底下蹲下来看
rotateX 效果
.inner {
width: 200px;
height: 200px;
background-color: rgb(60, 209, 209,0.7);
/* 设置x轴旋转 */
transform: rotateX(50deg);
}
rotateY 效果
transform: rotateY(50deg);
三、3D位移
3D 位移是在 2D 位移的基础上，可以让元素沿 z 轴位移，具体使用方式如下：
-
先给元素添加 转换属性 transform
-
编写 transform 的具体值， 3D 相关可选值如下：
值 含义 translateZ 设置 z 轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能
写百分比。translate3d 第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，且均
不能省略。
html基本结构
.outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深 近大远小 必须要设置在父元素上面 */perspective: 500px;/* 修改透视点位置 默认是正中央 */perspective-origin: 259px 226px;}<div class="outer"><div class="inner">3D位移</div></div>
写法1：translateZ
.inner {
width: 200px;
height: 200px;
background-color: rgba(87, 62, 230, 0.8);
/* 写法1 z 轴 我们可以看到是放大了 实际上是从里面出来*/
transform: translateZ(150px);
/* 增加阴影 */
box-shadow: 0px 0px 10px black;
}
写法2：transform
x 轴 y 轴 z轴 三个参数都不能省
transform: translate3d(100px,100px,100px);
总结
我们看到的第一眼以为是一个放大，实际上不是的，位移后，原本盒子没有厚度导致我们以为只是放大，这个时候我们需要调整透视点位置即可
四、3D选择
旋转是这些效果中最明显的。
3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和 y 轴旋转，具体使用方式如下：
1. 先给元素添加 转换属性 transform
2. 编写 transform 的具体值， 3D 相关可选值如下：
| 值 | 含义 |
|---|---|
| rotateX | 设置 x 轴旋转角度，需指定一个角度值( deg )，面对 x 轴正方向：正值顺时针，负 值逆时针。 |
| rotateY | 设置 y 轴旋转角度，需指定一个角度值( deg )，面对 y 轴正方向：正值顺时针，负 值逆时针。 |
| rotate3d | 前 3 个参数分别表示坐标轴： x , y , z ，第 4 个参数表示旋转的角度，参数不允 许省略。 例如： transform: rotate3d(1,1,1,30deg) ，意思是： x 、 y 、 z 分别旋转 30 度。 |
rotateX
沿着x轴开启3d空间
效果
代码
.outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深 近大远小 必须要设置在父元素上面 */perspective: 500px;/* 修改透视点位置 默认是正中央 */perspective-origin: 102px 102px;}.inner {width: 200px;height: 200px;background-color: rgb(167, 248, 44,0.9);/* x 轴 顺时针 *//* transform: rotateX(45deg) *//* y 轴 顺时针 *//* transform: rotateY(45deg); *//* 写法3 写的是4个值 x y z 旋转角度 */transform: rotate3d(1,0,1,30deg);}
<div class="outer"><div class="inner">3D旋转</div></div>
rotateY
沿着y轴进行旋转
效果
代码
/* y 轴 顺时针 */transform: rotateY(45deg);
rotate3d
复合属性写法 写的是4个值 x y z 旋转角度
transform: rotate3d(1,0,1,50deg);
五、3D缩放
3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放，具体使用方式如下：
- 先给元素添加 转换属性 transform
- 编写 transform 的具体值， 3D 相关可选值如下：
| 值 | 含义 |
|---|---|
| scaleZ | 设置 z 轴方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小 于 1 缩小。 |
| scale3d | 第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，参数不允许 省略。 |
代码结构
<style>.outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深 近大远小 必须要设置在父元素上面 */perspective: 500px;/* 修改透视点位置 默认是正中央 */perspective-origin: 102px 102px;}.inner {width: 200px;height: 200px;background-color: rgb(167, 248, 144,0.9);/* 写法1 scaleZ我们看到好像没有效果，我们调转旋转角度看 如果真的有厚度，到90度那么就可以看得到 */transform: scaleZ(4) rotateY(45deg);/* 写法2 最后一个参数是景深除以 最后一个参数，代表的就是离得近了*/transform: scale3d(1.5,1.5,4) rotateY(45deg);}</style>
</head>
<body><div class="outer"><div class="inner">3D缩放</div></div>
scaleZ
scaleZ我们看到好像没有效果,这个时候我们调整一下角度再看效果
-
transform: scaleZ(4) rotateY(45deg);
scale3d
最后一个参数是景深除以 最后一个参数，代表的就是离得近了
transform: scale3d(1.5,1.5,4) rotateY(45deg);
六、多重变换
我们同时使用多个属性同时实现变换，多重变换时，建议最后旋转。
方式1
transform-origin: left;
transform: rotateY(45deg);
方式2
y 轴线 右边 需要计算宽度
transform-origin: 200px 0px;
transform: rotateY(45deg);
方式3
/* 方式3 x 轴线 上方 */
transform-origin: 0px 0px;
transform: rotateX(45deg);
方式4
/* 方式4 x 轴线 下方 需要计算宽和高度 */
transform-origin: 202px 202px;
transform: rotateX(45deg);
方式5
位移 放大 旋转一起使用 旋转放到最后
/* 位移 放大 旋转一起使用 旋转放到最后 */
transform: translateZ(100PX) scaleZ(1.5) rotateY(45deg);
七、背部可见性
使用 backface-visibility 指定元素背面，在面向用户时是否可见，常用值如下：
- visible ： 指定元素背面可见，允许显示正面的镜像。—— 默认值
- hidden ： 指定元素背面不可见
** backface-visibility 需要加在发生 3D 变换元素的自身上。**
效果
代码
<style>.outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深 近大远小 必须要设置在父元素上面 */perspective: 500px;/* 修改透视点位置 默认是正中央 */perspective-origin: 102px 102px;}.inner {width: 200px;height: 200px;background-color: rgba(240, 35, 161, 0.9);/* 越过90度，背后不能看到 */backface-visibility: hidden;/* 旋转y轴 */transform: rotateY(40deg);}</style>
</head>
<body><div class="outer"><div class="inner">3D背部可见性</div></div>