CSS3 transform
1. Basic syntax:
transform:none|transform-functions;
Properties explained:
none
: The default value none, applicable to inline elements and block element, indicating that no modificationtransform-functions
: To set modification function, it may be one or more lists deformation function
2.2D conversion
3. element deformation origin
- The deformation element has an origin element around the point of rotation or deformation, the default start position is the center position of the element.
- CSS modification using transform-origin attribute specifies the element based on the origin of the deformation, the specific syntax is as follows:
transform-origin:x-axis y-axis z-axis;
/*transform-origin最多接受三个值,分别是X轴,Y轴,Z轴的偏移量*/
4.3D conversion
Refers to a 3D deformation element is rotated about its X axis, Y axis, Z axis.
5. Case
2D case:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3 2D转换</title>
<style>
.demo{
margin: 25px;
padding: 0;
width: 150px;
height: 50px;
background-color: #2bab79;
font-weight: bold;
font-size: larger;
float: left;
}
.trans1{
transform:rotate(30deg);
}
.trans2{
transform:skew(30deg);
}
.trans3{
transform:scale(0.8);
}
.trans4{
transform:translate(5px,50px);
}
</style>
</head>
<body>
<div class="demo">不设置变形</div>
<div class="demo trans1">rotate(30deg)</div>
<div class="demo trans2">skew(30deg)</div>
<div class="demo trans3">scale(0.8)</div>
<div class="demo trans4">translate(5,50px)</div>
</body>
</html>
display effect
3D Case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 3D转换</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.box {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 24px;
margin: 100px auto;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(30deg);
}
.front, .back, .left, .right, .top , .bottom {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0.5;
}
.front {
background-color: pink;
transform: translateZ(100px);
}
.left {
background-color: green;
transform: rotateY(90deg) translateZ(-100px);
}
.right {
background-color: red;
transform: rotateY(-90deg) translateZ(-100px);
}
.top {
background-color: blue;
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
background-color: yellow;
transform: rotateX(-90deg) translateZ(100px);
}
.back {
background-color: purple;
transform: translateZ(-100px);
}
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>