一. translate(x,y) 或者translateX(x)或者translateY(y)
注意点：translateX(x)和translateY(y)大写X和Y；只写一个值，默认y=0。
<body> <div></div> </body>
div{ width: 200px; height: 200px; background: rgb(185, 24, 24); transition: all 1s; } div:hover { transform: translate(100px,100px);/* 只写一个值，默认y=0 */ }
一个作用：使定位的盒子居中对齐，代替原来的方法——嵌套的定位盒子如何居中？
<div class="father"> <div class="son"></div> </div>
.father { width: 300px; height: 300px; border: 1px solid #000; position: relative; } .son { width: 100px; height: 100px; background: rgb(133, 57, 57); position: absolute; /* 水平垂直居中 */ left: 50%; top: 50%; transform: translate(-50%,-50%);/* transform的位移是居于自身位置的移动，并且会保留位置，类似relative */ }
二、scale(x,y)或scaleX(x)或scaleY(y)
注意点：scaleX(x)和scaleY(y)大写X和Y；只写一个值，默认x=y。
<body> <div></div> </body>
div{ width: 200px; height: 200px; background: rgb(185, 24, 24); transition: all 1s; } div:hover { transform: scale(0.6);/* 只写一个值，x=y=0.6 */ }
示例：鼠标经过盒子，图片会动（被放大），效果如下：
<body> <div><img src="sina.jpg"></div> </body>
div{ width: 229px; height: 143px;/* 盒子和图片宽高相等 */ overflow: hidden;/* 等下图片放大，切掉超过部分 */ } img{ transition: all 0.3s;/* 添加一个过渡效果 */ } div:hover img{ transform: scale(1.1);/* 鼠标经过盒子时，里面的图片（宽高都）放大110% */ }
三、rotate(angle)或rotateX(angle)或rotateY(angle)
注意：transform-origin 可以设置旋转点，默认是中心点 ；一定要跟度数deg。
<body> <div></div> </body>
div{ width: 200px; height: 200px; background: rgb(185, 24, 24); transform-origin: bottom right;/* 设置旋转点，默认是中心点 */ transition: all 1s; } div:hover { transform: rotate(180deg);/* deg必须要写 */ }
示例，旋转的6张图片，效果如下：
<body> <ul> <li><img src="1.jpg" ></li> <li><img src="2.jpg" ></li> <li><img src="3.jpg" ></li> <li><img src="4..jpg" ></li> <li><img src="5.jpg" ></li> <li><img src="6.jpg" ></li> </ul> </body>
ul { width: 220px; height: 220px; position: relative; } li{ list-style: none; position: absolute; left: 0; top: 0; transform-origin: left top; transition: all 1s; } ul:hover li:first-child{ transform: rotate(60deg); } ul:hover li:nth-child(2){ transform: rotate(120deg); } ul:hover li:nth-child(3){ transform: rotate(180deg); } ul:hover li:nth-child(4){ transform: rotate(240deg); } ul:hover li:nth-child(5){ transform: rotate(300deg); } ul:hover li:last-child{ transform: rotate(360deg); }
四、skew(x-angle,y-angle)或者skewX(angle)或者skewY(angle)
注意：只写一个，y=0
<body> <div></div> </body>
div{ width: 200px; height: 200px; background: rgb(185, 24, 24); transition: all 1s; } div:hover { transform: skew(20deg,30deg);/* 只写一个，y=0 */ }
总结：1. transform 可以连写，但是连写的顺序会影响动画，它是按照一定顺序来的；
2. transform 经常与 过渡transition 一起连用，用来展示动画效果；
3.有2D 也有3D，3D就是利用有XYZ轴，后面的补上。