Home > Developer > JavaScript
Transform performs 2d and 3d deformation (css Animation 1), transformcss
This is my understanding and arrangement after learning. If you have any errors or questions, please correct them and I will keep updating them!
For some time, I did not clarify the relationships between transform, translate, transition, and animation. Now I want to sort it out:
Translate)
Rotate)
Scale)
The Code is as follows:
<! DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> </ title>
<style type = "text / css">
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 300px;
margin: 100px 0 0 100px;
border: 10px solid red;
}
.test {
width: 200px;
height: 200px;
display: inline-block;
background: # 0ff;
transform: scale (.5, -1);
border: 1px solid # f60;
}
.test img {
max-width: 100%;
}
</ style>
</ head>
<body>
<div class = "wrapper">
<span class = "test"> <img src = "images / 1.jpg" /> </ span>
<span> scale can be set to a decimal or negative value; although the size seems to change, the occupied space does not change and it will not affect the layout
</ div>
</ body>
</ html>
4. skew
Skew (inclined)
It can be written as skewX (deg), skewY (deg), or abbreviated as skew (x, y). If only one value is written, the default is only the x axis
There is currently no tilt of the Z axis;
Inclining around the X axis will keep the height unchanged, stretching the element, causing deformation; Inclining around the Y axis, will keep the width unchanged;
Can write negative values (for the positive and negative values of the X axis);
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrapper{
width: 300px;
height: 300px;
position: relative;
margin: 100px 0 0 100px;
border: 1px solid red;
background: #0ff;
}
.test{
width: 150px;
height: 60px;
position: absolute;
left: 30%;
top: 30%;
background: #f60;
transform: skewX(-45deg);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="test"></div>
</div>
</body>
</html>
View Code 5. transform-origin
Set the reference point of the transformation element, and then the deformation of the element expands around this point;
The default value is the element center (50% 50% 0);
X and Y axis can set unit value, percentage, left | center | right | top | bottom; Z axis can only set specific unit value;
You can set 1-3 values, separated by spaces. If only one is written, then it is only the X axis; if two, it is the X and Y axes;
6. transform-style
Set how elements and their children are displayed in three-dimensional space;
The default value is flat, 2d plane; set to preserve-3d, which is 3d space;
When overflow: hidden is set on an element, preserve-ed fails;
Generally we use it on the element's parent element, because this attribute can be inherited;
7. prespective
Set the distance of the element from the view
The default is none (0); specific values can be set in pixels, not negative values;
When we look at distant objects, we can see that it is not clear. When we get closer, we can see it clear. This attribute can be understood as the distance between our position and the object;
We generally use it on the parent element of the deformed element, because the browser will produce a perspective effect for its child elements, and will not produce a perspective effect for itself; the element that sets this property is also called a perspective element;
8. prespective-origin
Set the viewpoint;
The default value (50% 50%), you can set the unit value, percentage, left | center | right | top | center | bottom;
You can set 1-2 values. When setting one value, the other defaults to center;
Can be understood as the position, face when we look at the girl? leg? chest?
This attribute must be defined on the element where the prospective attribute is set;
9. backface-visibility
Set whether the element is visible when the element is not facing the screen; this property is useful if you do not want to see the back of the rotated element;
Visible by default, hidden can be set;
code show as below:
The cube needs to be rotated 180 degrees around the Y axis.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
</head>
<body>
<style type="text/css">
*{padding: 0;margin: 0;}
li{list-style: none;}
/*定义舞台容器*/
.panel{
width: 800px;
margin: 100px auto;
perspective: 1300px;/*定义视距*/
}
.panel:hover ul{
transform: rotateY(60deg)rotateZ(45deg);
}
/*立方体*/
ul{
width: 100px;
height: 100px;
margin: auto;
position: relative;
transform-style:preserve-3d;/*定义该立方体是个3D元素*/
transform: rotateX(-30deg) rotateY(20deg);
transition: all 2s;
cursor: pointer;
}
/*立方体六个面*/
li{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
font: 30px/100px "微软雅黑";
text-align: center;
color: #fff;
backface-visibility: hidden;
}
.front{
transform: translateZ(50px) ;
background: rgba(0,255,0,.6);
}
.back{
transform: translateZ(-50px) rotateY(180deg) ;
/*后面要旋转绕Y轴180度，我一开始没想起来，调了很久*/
background: rgba(255,0,255,.6);
}
.left{
transform: translateX(-50px) rotateY(-90deg);
background: rgba(0,0,255,.6);
}
.right{
transform: translateX(50px) rotateY(90deg);
background: rgba(255,255,0,.6);
}
.top{
transform: translateY(-50px) rotateX(90deg);
background: rgba(255,0,0,.6);
}
.bottom{
transform: translateY(50px) rotateX(-90deg);
background: rgba(0,255,255,.6);
}
</style>
<div class="panel">
<ul>
<li class="top">上</li>
<li class="bottom">下</li>
<li class="left">左</li>
<li class="right">右</li>
<li class="front">前</li>
<li class="back">后</li>
</ul>
</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
