1-2-12【CSS3】CSS的3D转换
2020-11-09 本文已影响0人
Liyager
题外话：懒了好几天了，今天接着肝
文章内容输出来源：拉勾教育大前端就业集训营
1.概述
- 概述：上一篇文章中，介绍了HTML元素的2D转换：平移、旋转、倾斜等；本章则开始介绍，HTML元素的3D转换。
- 3D转换：transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的x、y轴组成的平面效果多了一条z轴，如下图:
- 透视：电脑显示屏是一个2D平面，图像之所以具有立体感(3D效果)，其实只是一种视觉呈现，通过透视可以实现此目的。
说明：“近大远小”是透视的精髓，也是在2D屏幕上展示3D效果的必要条件。
2.透视属性perspective
- 概述：设置在z轴的视线焦点的观察位置，从而实现3D查看效果。
- 属性值：像素值，数值越大，观察点距离原点越远，图形效果越完整且接近原始的尺寸。
- 注意：透视属性需要设置给3D变化元素的父级。
- 书写方式：perspective: 1000px;
说明：你会发现透视和没有透视好像没有区别？因为图像的z轴方向没有发生任何变化，所以和2D图像看起来一样。
3.3D旋转
- 概述：3D旋转比2D旋转更加复杂，需要分别对3个方向的旋转角度进行设定。当然，如果只有一个方向有旋转角度，则只需要写那个方向即可。
- 属性：transform
- 属性值：
| 属性值 | 说明 |
|---|---|
| rotateX(angle) | 定义沿着X轴的3D旋转 |
| rotateY(angle) | 定义沿着Y轴的3D旋转 |
| rotateZ(angle) | 定义沿着Z轴的3D旋转 |
- 注意事项：属性值的角度区分正负，以deg为单位（此处和2D一样），正值为顺时针方向，负值逆时针方向。
说明：在做3D转换的时候，脑子里一定要有这个坐标系，其实很简单，记住坐标轴正负和方向就好。
一个简单的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
perspective: 1000px;
margin: 350px auto;
}
img{
/* 为了居中设定的属性 */
position: relative;
left: 50%;
margin-left: -150px;
width: 300px;
/* 过渡 */
transition: all 0.2s linear 0s;
}
img:hover{
transform: rotateX(40deg);
}
</style>
</head>
<body>
<div>
<img src="cat01.jpeg" alt="">
</div>
</body>
</html>
说明：因为只对X轴进行了旋转，且X轴的“旋转正方向”为垂直图片向里，所以我们感觉图片上半部分离我们更远了。
透视距离设置过小的结果
说明：上面讲perspective属性时提到，该属性的属性值相当于我们的观察位置，所以距离过小会出现如图所示的情况。
一般来说，我们设定1000px就可以了。
4.3D位移
- 概述：位移因为是3D了，所以也要分为3个方向进行移动。
- 属性：transform
- 属性值：
| 属性值 | 说明 |
|---|---|
| translateX(x) | 定义沿着X轴的位移 |
| translateY(y) | 定义沿着Y轴的位移 |
| translateZ(z) | 定义沿着Z轴的位移 |
- 注意事项：属性值的角度区分正负，以px或%为单位（此处和2D一样），正值为坐标轴正方向，负值负方向。
一个简单的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
perspective: 1000px;
margin: 350px auto;
}
img{
/* 为了居中设定的属性 */
position: relative;
left: 50%;
margin-left: -150px;
width: 300px;
/* 过渡 */
transition: all 0.2s linear 0s;
}
img:hover{
transform: translateZ(100px);
}
</style>
</head>
<body>
<div>
<img src="cat01.jpeg" alt="">
</div>
</body>
</html>
说明：该案例对图片在Z轴进行了100px的位移，因为Z轴的正方向为垂直于图片向外，所以看起来图片变大了。
一个炫酷的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 取消默认样式 */
*{
margin: 0px;
padding: 0px;
}
/* 父盒子 */
.f-box{
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
perspective: 5000px;
transition: all 2.5s ease-in-out 0s;
/* 这个特殊属性，下面会讲，记住了 */
transform-style: preserve-3d;
}
/* 子盒子统一属性 */
.f-box div{
position: absolute;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
text-align: center;
line-height: 200px;
font-size: 70px;
}
/* 子盒子独特属性 */
.c-box1{
background-color: rgba(231, 45, 45, 0.521);
transform: translateZ(100px)
}
.c-box2{
background-color: rgba(231, 150, 45, 0.521);
transform: rotateX(90deg) translateZ(100px);
}
.c-box3{
background-color: rgba(219, 231, 45, 0.521);
transform: rotateX(180deg) translateZ(100px);
}
.c-box4{
background-color: rgba(119, 231, 45, 0.521);
transform: rotateX(270deg) translateZ(100px);
}
.c-box5{
background-color: rgba(45, 88, 231, 0.521);
transform: rotateY(90deg) translateZ(100px);
}
.c-box6{
background-color: rgba(172, 45, 231, 0.521);
transform: rotateY(-90deg) translateZ(100px);
}
/* 旋转 */
.f-box:hover {
transform: rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<div class="f-box">
<div class="c-box1">1</div>
<div class="c-box2">2</div>
<div class="c-box3">3</div>
<div class="c-box4">4</div>
<div class="c-box5">5</div>
<div class="c-box6">6</div>
</div>
</body>
</html>
说明：先用定位将6个面放到一起；然后用3D转换，将6个面各自摆放在正确的位置上；最后将父元素进行3D旋转，实现酷炫的3D效果。
transform-style属性
-
概述：用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。
白话：说白了就是让子元素的3D效果，在父元素中也生效 -
属性值：
- flat：所有的子元素在2D平面呈现；
- preserve-3d：保留3D控件。
-
用法：3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style:preserve-3d，来使其变成一个真正的3D图形。
说明：父元素没有设置该属性，则子元素都会像纸片一样。
兼容性
- Internet Explorer10、Firefox以及Opera支持transform属性。
- Chrome 和 Safari 需要前缀 -webkit-。
- Internet Explorer 9 需要前缀 -ms-。
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
结束语：一花一世界，一木一浮生，愿与诸君共勉
