<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2d转换</title>
<style>
.box{
height: 100px;
background-color: pink;
}
.one{
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
}
.box:hover .one{
/*位移是相对元素自身*/
transform: translate(100px,100px);
/*缩放,设置倍数*/
transform: scale(0.5,0.8);
/*旋转,*/
transform:rotate(45deg);
/*倾斜*/
transform: skew(30deg,30deg);
}
</style>
</head>
<body>
<div>
<h5>2d转换</h5>
<p>位移</p>
<p>旋转</p>
<p>缩放</p>
<p>倾斜</p>
</div>
<div class="box">
<div class="one">
hello world
</div>
</div>
</body>
</html>
【css3】2d转换
最新推荐文章于 2024-09-02 08:53:49 发布