CSS动画：移动、缩放、旋转、倾斜的实现移动属性：translate
缩放属性：scale
旋转属性：roate
倾斜属性：skew
html：定义五个属性进⾏⽐较，链⼊css⽂件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="ss.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="div1">初始状态</div>
<br>
<div class="div2">移动后的状态</div>
<br>
<div class="div3">旋转后的状态</div>
<br>
<div class="div4">缩放后的状态</div>
<br>
<div class="div5">倾斜后的状态</div>
</body>
</html>
css⽂件：
div{
width: 200px;
height:200px;
background: #20ff26;
margin: auto;
}
/*⽔平移动x和y轴的距离，translate（）中第⼀个参数是x轴移动距离，第⼆个参数是y轴移动距离*/
.div2{
transform: translate(100px,100px);
}
/*旋转⾓度，单位是deg*/
.div3{
transform: rotate(200deg);
}
/*缩放效果，第⼀个参数是x轴缩放的倍数，第⼆个参数是y轴缩放的倍数。⼤于1是放⼤，⼩于1是缩⼩，1是正常倍数*/
.div4{
rotate属性
transform: scale(0.5,0.5);
}
/*倾斜效果，第⼀个参数是围绕x轴旋转⾓度，第⼆个参数是围绕y轴旋转⾓度*/
.div5{
transform: skew(10deg,10deg) ;
}
实现效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。