概念
- 移动
- 旋转
- 缩放
- 倾斜
特点：transform不会触发回流，和重绘。
我们一个一个看
实践
所有操作的默认的基点都在中心位置，可以使用 transform-origin: (x,y) 来改变元素基点，一般基本不会用到。
移动
2D
translate(x,y)
translateX(x)
translateY(y)
3D
translate3d(x,y,z)
translateZ(z)
旋转
2D
rotate(angle)
3D
rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
缩放
2D
scale(x,y)
scaleX(x)
scaleY(y)
3D
scale3d(x,y,z)
scaleZ(z)
倾斜
2D
skew(x-angle,y-angle)
skewX(angle)
skewY(angle)
其他
// 定义不进行转换。
none
// 为 3D 转换元素定义透视视图。
perspective(n)
// 定义 2D 转换，使用六个值的矩阵。
matrix(n,n,n,n,n,n)
// 定义 3D 转换，使用 16 个值的 4x4 矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
测试
<!DOCTYPE html>
<html>
<head>
<title>测试专用模板</title>
<style type="text/css">
div, body {
padding: 0;
margin: 0;
}
.mydiv {
width: 200px;
height: 200px;
background-image: url('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg');
background-size: cover;
transform: rotateY(0deg) translate3d(50px,50px,50px);
}
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div>
<div class="mydiv"></div>
</div>
</body>
<script type="text/javascript">
</script>
</html>