2d基点位置 transform-origin
transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。
0.原状态
1.默认基点位置为元素的中心点
transform: rotate(45deg);
2.像素值改变基点位置
transform: rotate(45deg);
transform-origin: 0 0;
3.用位置描述来改变基点位置
transform: rotate(45deg);
transform-origin: top center;
4.百分比改变基点位置
transform: rotate(45deg);
transform-origin: 100% 100%;
3d透视距离 Perspective
属性作用：透视，可以近似理解为视图与人眼的距离。
滑动开关，调整与人眼的距离。
将以下代码复制到浏览器环境中执行体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.control {
text-align: center;
}
.stage {
margin:auto;
perspective: 200px;
position: relative;
width:400px;
}
.actor {
/* position: absolute; */
width: 400px;
height: 400px;
background-color: rgba(255, 100, 100, 0.5);
}
</style>
<body>
<div class="control">
<input type="range" onchange="fn(value)" max="250" min="0" value="0">
</div>
<div class="stage">
<div class="actor"></div>
</div>
<script>
let divStyle = document.getElementsByClassName('actor')[0].style
function fn (value) {
divStyle.transform = 'translateZ(' + value + 'px)'
}
</script>
</body>
</html>
3d舞台 transform-style
Transform-style: preserve-3d
属性作用：保存子元素的3D效果。
旋转的立方体。
将以下代码复制到浏览器环境中执行体验。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 500px;
margin: 50px auto;
}
.cub{
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 5s linear;
}
.cub div{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
border: 1px solid #46B8DA;
opacity: 0.5;
}
.one{
transform: rotateY(0deg) translateZ(50px);
}
.two{
transform: rotateY(180deg) translateZ(50px);
}
.three{
transform: rotateX(90deg) translateZ(50px);
}
.four{
transform: rotateX(-90deg) translateZ(50px);
}
.five{
transform: rotateY(90deg) translateZ(50px);
}
.six{
transform: rotateY(-90deg) translateZ(50px);
}
.cub:hover{
transform: rotateX(360deg) rotateY(360deg);
-webkit-transform: rotateX(360deg) rotateY(360deg);
}
/* .cub:hover .one{
transform: rotateY(0deg) translateZ(100px);
}
.cub:hover .two{
transform: rotateY(180deg) translateZ(100px);
}
.cub:hover .three{
transform: rotateX(90deg) translateZ(100px);
}
.cub:hover .four{
transform: rotateX(-90deg) translateZ(100px);
}
.cub:hover .five{
transform: rotateY(90deg) translateZ(100px);
}
.cub:hover .six{
transform: rotateY(-90deg) translateZ(100px);
} */
</style>
</head>
<body>
<div class="container">
<div class="cub">
<div class="one" style="background-color: #FFC0CB"></div>
<div class="two" style="background-color: #449D44"></div>
<div class="three" style="background-color:#46B8DA"></div>
<div class="four" style="background-color: #9E90EE"></div>
<div class="five" style="background-color: #C0A16B"></div>
<div class="six" style="background-color: #D6E9C6"></div>
</div>
</div>
</body>
</html>
3d视觉方位perspective-origin
空间内的视觉方位
perspective-origin: 25% 75%;
立方体的透视效果图
3d穿透backface-visibility
穿透可视
在C3中，我们可以看到A物体后面的B物体，而在现实世界中，我们无法穿透，故多重3d元素的情况下，记得做如下设置：
backface-visibility:hidden;
本文主要参考自张鑫旭老师
举起手手点赞的人，注意下，我看到了你的内涵
