可以通过设置css属性改变标签的移动位置，旋转，缩放比例，倾斜度数。
transform 是一个符合属性，一个标签的属性不可以出现两个transform。可以发他们的值写在一些。
移动的方向是：
水平左正，右负。
垂直方向，上负，下正。
首先显示transform 的属性都有那些
translateX(x)：平移元素沿 x 轴translateY(y)：平移元素沿 y 轴translate(x, y)：平移元素沿 x 和 y 轴scaleX(x)：缩放元素沿 x 轴scaleY(y)：缩放元素沿 y 轴scale(x, y)：缩放元素沿 x 和 y 轴rotate(angle)：旋转元素一个角度rotateX(angle)：沿 x 轴旋转元素rotateY(angle)：沿 y 轴旋转元素rotateZ(angle)：沿 z 轴旋转元素skewX(angle)：倾斜元素沿 x 轴skewY(angle)：倾斜元素沿 y 轴skew(angle);默认原点倾斜1：translate 移动位置
用到的是
transform: translate(200px,100px); 表示向左移动200px,向下移动100px.
transform: translate(200px);也可以是一个值，表示向左移动200px.
transform: translate(100%); translate里的值也可以是百分比。
移动的距离是参考自身，如果自身宽度是200px，那么100%就是200px,同时高度也是同样的道理。
translateX() 表示的就是向水平方向可以作用移动。
translateY() 表示的是垂直方向移动。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>平移效果</title> <style> .father{ width: 500px; height: 300px; margin: 100px auto; border: 1px solid #000; } .son{ width: 200px; height: 100px; background-color: pink; transition: all 0.5s; } /* 鼠标移入到父盒子,.son改变位置 */ .father:hover .son { /* 做移动200px,向下移动100px */ transform: translate(200px,100px); /* 百分比:参照盒子自身尺寸计算结果 */ /* 这个向当于向左100px,向下100px */ transform: translate(50%,100%); transform: translate(-50%,100%); /* 只写一个数表示水平方向 */ transform: translate(100px); transform: translatey(100px); transform: translateX(100px); } </style></head><body> <div class="father"> <div class="son"></div> </div></body>2：scale 缩放比例
transform: scale(2); 作用是把原来的宽高，缩放到之前的2倍。
scaleX(x)：缩放元素沿 x 轴scaleY(y)：缩放元素沿 y 轴scale(x, y)：缩放元素沿 x 和 y 轴特别注意：
transform-origin: right bottom; 这个属性transform-origin：可以改变缩放的中心位置。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩放效果</title> <style> .box{ width: 300px; height: 200px; margin: 100px auto; background-color: pink; } .box img{ width: 100%; transition: all 1s; } .box:hover img { /* 修改宽度尺寸,从坐上角开始缩放 */ /* width: 500px; */ /* height: 300px; */ /* 大于1 ,表示放大 */ /* transform: scale(2); */ /* 小于1,表示放小 */ /* transform: scale(0.5); */ /* 等于1,表示不变 */ transform: scale(1); } </style></head><body> <div class="box"> <img src="./images/product.jpeg" alt=""> </div></body>3：rotate(angle)；旋转时带上单位。
rotate(angle)：旋转元素一个角度rotateX(angle)：沿 x 轴旋转元素rotateY(angle)：沿 y 轴旋转元素rotateZ(angle)：沿 z 轴旋转元素<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转效果</title> <style> img { width: 200px; transition: all 2s; } /* 鼠标悬停到图片上,添加旋转效果 */ img:hover { /* 正数:图片是顺势针旋转,负数:图片是逆势针旋转 */ transform:rotate(360deg); transform:rotate(-360deg); } </style></head><body> <img src="./images/rotate.png" alt=""></body><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转原点</title> <style> img{ width: 200px; height: 200px; border: 1px solid sandybrown; transition: all 1s; /* 改变旋转得位置. */ transform-origin: right bottom; } img:hover{ transform: rotate(360deg); } </style></head><body> <img src="./images/rotate.png" alt=""></body></html>特别：
也可以先移动在旋转
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多种转换效果</title> <style> .box{ width: 800px; height: 200px; border: 1px solid #000; } img{ width: 200px; transition: all 5s; } /*鼠标移动到盒子里,图片边走边转*/ .box:hover img{ /* 先平移,在旋转 */ transform: translate(600px) rotate(360deg); /* 旋转会改变坐标轴向 */ /* 多重转换:以第一种旋转形态得坐标轴为准 */ /* transform: rotate(360de) translate(600px); */ /* 层叠性 */ /* transform: translate(600px); */ /* transform: rotate(360deg); */ } </style></head><body> <div class="box"> <img src="./images/tyre.png" alt=""> </div></body>4：skew(angle);默认原点倾斜
skewX(angle)：倾斜元素沿 x 轴skewY(angle)：倾斜元素沿 y 轴skew(angle);默认原点倾斜<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倾斜效果</title> <style> div{ margin: 0 auto; width: 100px; height: 200px; background-color: pink; transition: all .5s; } div:hover{ transform: skew(30deg); } </style></head>
这个transform CSS属性，是一个混合属性:
transform: translate(800px) rotate(360deg) scale(2) skew(180deg);
在一个标签中，要回合写在一起，同时顺序不同效果也会不同。