<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>2D形变</title>
<!--
旋转
平移
缩放
扭曲
矩阵
transform:rotate(30deg);
degree
-->
<style type="text/css">
.box{
height: 60px;
width: 60px;
border: 1px solid red;
background: green;
}
.box1{
height: 60px;
width: 60px;
border: 1px solid red;
background: pink;
}
.box2{
height: 60px;
width: 60px;
border: 1px solid red;
background: blue;
}
.box3{
height: 60px;
width: 60px;
border: 1px solid red;
background: blue;
}
.box4{
height: 60px;
width: 60px;
border: 1px solid red;
background: blue;
}
.box5{
height: 60px;
width: 60px;
border: 1px solid red;
background: yellow;
}
.box:hover{
transform: rotate(30deg);
}
.box1:hover{
transform: scale(2);
}
.box2:hover{
transform: scaleY(0.2) scaleX(3) rotate(30deg);
}
.box3:hover{
transform: skew(30deg,30deg);
}
.box4:hover{
transform:rotateX(30deg) rotateY(50deg) rotateZ(60deg);
transform-style: preserve-3d;
}
.box5:hover{
transform: matrix(2,30,30,2,20,20);
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
<div class="box5">
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>2D形变</title>
<!--
旋转
平移
缩放
扭曲
矩阵
transform:rotate(30deg);
degree
-->
<style type="text/css">
.box{
height: 60px;
width: 60px;
border: 1px solid red;
background: green;
}
.box1{
height: 60px;
width: 60px;
border: 1px solid red;
background: pink;
}
.box2{
height: 60px;
width: 60px;
border: 1px solid red;
background: blue;
}
.box3{
height: 60px;
width: 60px;
border: 1px solid red;
background: blue;
}
.box4{
height: 60px;
width: 60px;
border: 1px solid red;
background: blue;
}
.box5{
height: 60px;
width: 60px;
border: 1px solid red;
background: yellow;
}
.box:hover{
transform: rotate(30deg);
}
.box1:hover{
transform: scale(2);
}
.box2:hover{
transform: scaleY(0.2) scaleX(3) rotate(30deg);
}
.box3:hover{
transform: skew(30deg,30deg);
}
.box4:hover{
transform:rotateX(30deg) rotateY(50deg) rotateZ(60deg);
transform-style: preserve-3d;
}
.box5:hover{
transform: matrix(2,30,30,2,20,20);
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
<div class="box5">
</div>
</body>
</html>