<!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 {
width: 300px;
height: 100px;
margin: 50px;
padding: 50px;
border: 5px groove rgba(120, 120, 120, 0.5);
background-color: aquamarine;
}
#div66 {
width: 200px;
height: 50px;
background-color: antiquewhite;
margin: 0;
padding: 0;
}
#div1:hover {
transform: translate(100px, 100px);
transition: 0.3s;
}
#div2:hover {
transform: translateX(100px);
transition: 3s;
}
#div3:hover {
transform: scale(2);
transition: 3s;
}
#div4:hover {
transform: scaleX(2);
transition: 3s;
}
#div5:hover {
transform-origin: right bottom;
transform: rotate(60deg);
transition: 3s;
}
#div66:hover {
transform: skewY(30deg);
}
</style>
</head>
<body>
<div id="div1">111</div>
<div id="div2">222</div>
<div id="div3">333</div>
<div id="div4">444</div>
<div id="div5">555</div>
<div id="div6">
<div id="div66">666</div>
</div>
<div id="div7">777</div>
<div id="div8">888</div>
</body>
</html>
盒子1:transform: translate(100px, 100px); 水平竖直方向上的位移， transition: 0.3s; 过渡时间 。
盒子2:transform: translateX(100px);X轴方向上的位移100个像素
盒子3:transform: scale(2); 盒子放大二倍
盒子4:transform: scale(3); 盒子沿X轴放大二倍
盒子5：transform-origin: right bottom; transform: rotate(60deg);盒子沿右下角旋转60°
盒子6: transform: skewY(30deg); 在盒子6里面建一个小盒子并扭曲30°
transform-origin: right bottom; 基准点
扫一扫
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
