<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
#box{
width: 100px;
height: 100px;
background: red;
/*沿着x,y轴各移动150px*/
/*transform:translate(150px,150px);*/
/*margin: 200px auto;*/
/*顺时针旋转60度*/
/*transform: rotate(60deg);*/
/*缩放*/
/*transform: scale(2,3);*/
/*倾斜*/
/*transform: skew(30deg,20deg);*/
/*矩阵*/
transform: matrix(1,0,0,1,30,30);
}
</style>
</head>
<body>
<div id ="box"></div>
</body>
</html>2D转换：translate()、rotate（）、scale（）、skew(）
3D转换：translate3d()、rotate3d()、scale3d()
3D转换属性：transform-origin、transform-style
转换元素的透视视图：perspeective