一、变形
变形是指通过 CSS 来改变元素的形状或位置，变形不会影响到页面的布局。通过 transform 属性，我们可以实现变形的效果。
二、平移变形
<!DOCTYPE html>
<html>
<head>
<title>平移变形</title>
<meta charset="UTF-8">
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 0 auto;
margin-top: 200px;
transition: 2s;
}
.box1:hover{
/*
transform：用来设置元素的变形效果
- 平移：
- translateX()：沿着x轴方向平移
- translateY()：沿着y轴方向平移
- translateZ()：沿着z轴方向平移
- 平移元素，百分比是相对于自身计算的
*/
transform: translateX(100px) translateY(-50%);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
三、Z轴平移
Z 轴平移，调整元素在 Z 轴的位置，正常情况下就是调整元素和人眼之间的距离，距离越大，元素里人越近。Z 轴平移属于立体效果（近大远小），默认情况下网页是不支持透视的。如果需要看到效果，必须设置网页的视距。
<!DOCTYPE html>
<html>
<head>
<title>Z轴平移</title>
<meta charset="UTF-8">
<style>
body{
/* 设置视距 */
perspective: 800px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 0 auto;
margin-top: 200px;
transition: 2s;
}
.box1:hover{
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
四、旋转变形
通过旋转，可以使元素沿着 x、y 或 z 轴旋转指定的角度。
<!DOCTYPE html>
<html>
<head>
<title>旋转变形</title>
<meta charset="UTF-8">
<style>
body{
/* 设置视距 */
perspective: 800px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 0 auto;
margin-top: 200px;
transition: 2s;
/*
backface-visibility：是否显示元素的背面
- 可选值：
- hidden：隐藏
- visible：默认值，显示
*/
backface-visibility: visible;
}
.box1:hover{
/*
通过旋转可以使元素沿着x、y或z轴指定的角度
- rotateX：沿着X轴旋转
- rotateY：沿着Y轴旋转
- rotateZ：沿着Z轴旋转
- deg代表角度，turn代表圈数
*/
transform: rotateZ(1turn);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
五、缩放变形
<!DOCTYPE html>
<html>
<head>
<title>缩放变形</title>
<meta charset="UTF-8">
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto;
/*
transform-origin：指定变形的原点
- center：默认值，从中间开始
*/
transform-origin: 0 0;
transition: 2s;
}
.box1:hover{
/*
对元素进行缩放
- scaleX()：水平方向缩放
- scaleY()：垂直方向缩放
- scaleZ()：Z轴缩放
- scale()：双方向缩放
*/
transform: scale(2);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>