<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转换（旋转，平移，缩放，扭曲）</title>
<style>
div.rotate,
div.translate,
div.scale,
div.skew,
div.location {
100px;
height: 100px;
background-color: rgb(99, 97, 235);
margin: 20px 50px;
}
div.rotate>div.rot,
div.translate>div.tlate,
div.scale>div.sca,
div.skew>div.sk,
div.location>div.loca {
100px;
height: 100px;
background: rgb(197, 30, 30);
transition: all .3s;
opacity: 0.8;
}
/* 旋转 */
div.rotate>div.rot:hover {
transform: rotate(90deg);
}
/* 平移 */
div.translate>div.tlate:hover{
transform: translate(50px,20px);
}
/* 缩放 */
div.scale>div.sca:hover{
transform: scale(1.5,0.5);
}
/* 扭曲 */
div.skew>div.sk:hover{
transform: skew(20deg,50deg);
}
/* 控制旋转的位置 */
div.location>div.loca:hover{
transform-origin: 0 50%;
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="rotate">
<div class="rot"></div>
</div>
<div class="translate">
<div class="tlate"></div>
</div>
<div class="scale">
<div class="sca"></div>
</div>
<div class="skew">
<div class="sk"></div>
</div>
<div class="location">
<div class="loca"></div>
</div>
<!-- matrix(a,b,c,d,e,f)
matrix(1,0,0,1.5,40,50)
1: 水平缩放比例。默认1
0：缩放
0：缩放
1.5：垂直方向缩放比例
40：水平方向位移
50：垂直方向位移
-->
</body>
</html>