perspective属性
◆该属性主要用于呈现良好的3D透视效果
perspective:1000px;
总结：
1.该属性要给变形元素的父元素设置
2.该属性不是一个必须要设置的属性
3.该属性的取值不是唯一的，但是我们一般情况下将该属性的取值设置为800~1000之间
平移
transform:translateX(100px) translateY(100px) translateZ(100px);
总结：
1.如果设置的是正数，那么就沿着对应坐标轴的正方向移动，反之负方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 400px;
background-color: blue;
overflow: hidden;
perspective: 900px;
}
.one{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transition: all 1s linear;
}
.box:hover .one{
transform: translateZ(200px);
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
</div>
</body>
</html>
旋转
记住变化之后，坐标轴也跟着变化了
总结：
◆通过左手法则判断元素的旋转方向
◆左手法则： 用左手握住坐标轴，大拇指指向坐标轴的方向，四个手指弯曲的方向就是旋转的方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 400px;
background-color: blue;
overflow: hidden;
perspective: 900px;
}
.one{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transition: all 1s linear;
}
.box:hover .one{
transform: rotateX(360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
</div>
</body>
</html>
缩放与倾斜
transform: scaleX(2) scaleY(2) ;
transform: skewX(30deg);
3D转换实现一个正方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
.box{
width: 400px;
height: 400px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
transform: rotateY(45deg) rotateX(45deg);
}
.box>div{
width: 400px;
height: 400px;
position: absolute;
}
.top{
background-color: #000000;
transform: rotateX(90deg) translateZ(200px);
}
.bottom{
background-color: blue;
transform: rotateX(-90deg) translateZ(200px);
}
.left{
background-color: yellow;
transform: rotateY(-90deg) translateZ(200px);
}
.right{
background-color: red;
transform: rotateY(90deg) translateZ(200px);
}
.before{
background-color: orange;
transform: translateZ(200px);
}
.after{
background-color: #ff1ba6;
transform: translateZ(-200px);
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="before"></div>
<div class="after"></div>
</div>
</body>
</html>
