2D deformation:
1) translation
transform: translate(x,y); move the element from the current position to the coordinate position of the given x-axis and y-axis
transform: translateX(x); move along the X axis
transform: translateY(y); move in the direction of the Y axis
Note: horizontal right value is positive, vertical down value is positive
transform: translate(50px); move along the x axis
2) rotation
transform: rotate(ndeg);
When the angle is positive, the element rotates n degrees clockwise; when the angle is negative, it rotates counterclockwise
3) zoom
transform: scale(x,y); elements scale along the X and Y axes
transform: scaleX(x); scale along the X axis
transform: scaleY(y); scale along the Y axis
Values of x and y: 0-1 for reduction, 1 for normal size, more than 1 for enlargement, and when the value is negative, first flip and then zoom
Transform: Scale (0.5); scale X and y equally
4) tilt
transform: skew(x,y); elements tilt in horizontal and vertical directions, in deg
transform: skewX(x); tilt along X axis
transform: skewY(y); tilt in Y direction
transform: skew(30deg); tilt along x-axis
Note: transform: rotate(360deg) scale(3); elements should be rotated and scaled
Transform origin attribute: adjustment of element base point position, which must be used with transform attribute
3D deformation required attributes:
1) Transform style attribute:
Transform style: preserve-3d; create 3D space
2) Perspective attribute: perspective attribute, near large, far small, unit pixel
Note: both of the above attributes need to be written in the parent element
Axis of 3D space: x axis (right is positive), y axis (lower is positive), z axis (outward is positive)
3D deformation effect:
1) translation
transform: translateZ(z); translate along Z axis
transform: translate3d(x,y,z); move along X axis, Y axis, Z axis
2) rotation
transform: rotateX(xdeg); rotate in x direction
transform: rotateY(ydeg); rotate in y-axis direction
transform: rotateZ(zdeg); rotate in z direction
transform: rotate3d(x,y,z,angle); rotate along X axis, Y axis, z axis
3) Zoom:
transform: scaleZ(); scale along z axis
transform: scale3d(x,y,z); scale along X, y, Z<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.wrap{
width: 1200px;
margin: 20px auto;
}
.wrap div{
float: left;
border: 2px solid #000000;
margin: 0 30px 30px 0;
transform: preserve-3d;
perspective: 500px;
}
.wrap div img{
transition: all 2s;
}
.wrap div:nth-child(2):hover img{
transform: translateZ(100px);
}
.wrap div:nth-child(3):hover img{
transform: translateZ(-100px);
}
.wrap div:nth-child(4):hover img{
transform: translateX(-100px);
transform: translateY(100px);
}
.wrap div:nth-child(5):hover img{
transform: translate3d(100px,0,0);
transform: translate3d(0,100px,0);
transform: translate3d(0,0,100px);
}
.wrap div:nth-child(6):hover img{
transform: rotateX(30deg);
}
.wrap div:nth-child(7):hover img{
transform: rotateX(-30deg);
}
.wrap div:nth-child(8) img{
transform-origin: top;
transform-origin: bottom;
}
.wrap div:nth-child(8):hover img{
transform: rotateX(-30deg);
}
.wrap div:nth-child(9):hover img{
transform: rotateY(30deg);
transform: rotateY(-30deg);
}
.wrap div:nth-child(10):hover img{
transform: rotateZ(30deg);
}
.wrap div:nth-child(11):hover img{
transform: rotate3d(1,0,0,45deg);
transform: rotateX(45deg);
}
.wrap div:nth-child(12):hover img{
transform: rotate3d(0,1,0,45deg);
transform: rotateY(45deg);
}
.wrap div:nth-child(13):hover img{
transform: rotate3d(0,0,1,45deg);
transform: rotateY(45deg);
}
.wrap div:nth-child(14):hover img{
transform: rotate3d(1,1,0,45deg);
transform: rotate3d(1,1,1,45deg);
}
/* z The direction of the axis has changed. It's thickened */
.wrap div:nth-child(15):hover img{
transform: scaleZ(2);
}
.wrap div:nth-child(16):hover img{
transform: scale3d(1.5,0.5,2);
}
</style>
</head>
<body>
<div class="wrap">
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
<div><img src="images/pic02.jpg" ></div>
</div>
</body>
</html>
