此HTML代码展示了CSS中的transform属性用于创建位移、缩放、旋转和倾斜效果，以及transition属性实现平滑过渡。通过不同的ID选择器，对多个div元素应用了不同类型的变换，如translate、scale、rotate和skew，同时也调整了过渡时间和旋转原点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 100px;
margin: 50px;
padding: 50px;
border: 5px groove rgba(120,120,120,0.5);
background-color: aquamarine;
}
#div1:hover{
transform: translate(100px,100px);
/* 位移方向 translate */
transition: 0.3s;
/* 位移时间 transition */
}
#div2:hover{
transform: translateX(100px);
transition: 10s;
}
#div3:hover{
transform: scale(0.5);
/* scale缩放 */
transition: 3;
}
#div4:hover{
transform: scaleX(2);
}
#div5:hover{
transform: rotate(60deg);
transform-origin: right bottom;
/* rotate 旋转 transform-origin 根据哪个基准点旋转 */
}
#div66{
width: 400px;
height: 200px;
background-color: blue;
padding: 0;
margin: 0;
/* transform: ; */
}
#div66:hover{
transform: skewX(90deg) rotate(90deg);
transform-origin: bottom;
transition: 2s
}
</style>
<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>
<div id="div9">999</div>
</body>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
