一.2D变换
1.旋转transform:rotate
例:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{
width: 400px;
height: 400px;
background: pink;
/*padding: 100px 0px 0px 100px;*/
text-align: center;
/*line-height: 400px;*/
transition: all 5s;
margin: 100px auto;
}
.div_01{
margin-top: 100px;
display: inline-block;
width: 200px;
height: 200px;
background: orange;
transition: all 3s;
}
.wrap:hover{
/*transform: rotateX(); 表示X轴的旋转*/
/*transform: rotateY(); 表示Y轴的旋转*/
transform: rotate(45deg);
}
.wrap:hover .div_01{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="div_01"></div>
</div>
</body>
</html>
2.位移transform:translate(水平,垂直)
例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
background: antiquewhite;
transition: all 10s;
}
.div1{
width: 200px;
height: 200px;
background-color: white;
}
.div1:hover{
background: aqua;
opacity: 0.3;
border-radius: 50%;
transform: translateX(700px) rotate(360deg) scale(2) skew(360deg);
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
3.扭曲transform:skew()值为度数,skewX(水平方向),skewY(垂直方向)
例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 400px;
height: 400px;
background-color: darkmagenta;
margin: 200px auto;
transition: all 5s;
}
.div1:hover{
transform: skew(12138deg);
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
4.缩放transform:scale()值代表倍数,scaleX水平缩放,scaleY垂直缩放
例;
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
background: aqua;
transition: all 1s;
}
.div1:hover{
transform: scaleX(2);
/*transform: scaleY(3);*/
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>