<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="UTF-8">
<title>2d3d动画</title>
<meta charset="UTF-8">
<title>2d3d动画</title>
<!--
2D动画
位移
旋转
缩放
扭曲,倾斜
矩阵
-->
2D动画
位移
旋转
缩放
扭曲,倾斜
矩阵
-->
<style>
/*
缩放动画
单位:数值
* */
.suofang {
width: 100px;
height: 100px;
background-color: red;
}
.suofang:hover {
transform: scale(2);
}
/*
位移动画
单位:px
* */
.weiyi {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: yellow;
}
.weiyi:hover {
transform: translate(100px, 300px);
}
/*
旋转动画
单位:deg
* */
.xuanzhuan {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: black;
}
.xuanzhuan:hover {
transform: rotate(40deg);
}
/*
扭曲,倾斜动画
单位:deg
* */
.niuqv {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: cyan;
}
.niuqv:hover {
transform: skew(30deg, 30deg);
}
/*
矩阵动画
单位:数值
matrix() 6个属性的意思的:
第一个宽度比例1就是原大小,
第二个是上下倾斜1就是2倍,2就是3倍,0就是不倾斜
第三个是左右倾斜,数字和第二个一样的意思,
第四个是高度比例1就是原大小,
第五个是X方向的像素位移,X方向就是左右,
第六个是Y方向的像素位移,X方向就是上下
* */
.jvzhen {
width: 200px;
height: 200px;
margin-top: 20px;
background-color: darkslategray;
}
.jvzhen:hover {
transform: matrix((10,2,4,1,100,100)
}
</style>
/*
缩放动画
单位:数值
* */
.suofang {
width: 100px;
height: 100px;
background-color: red;
}
.suofang:hover {
transform: scale(2);
}
/*
位移动画
单位:px
* */
.weiyi {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: yellow;
}
.weiyi:hover {
transform: translate(100px, 300px);
}
/*
旋转动画
单位:deg
* */
.xuanzhuan {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: black;
}
.xuanzhuan:hover {
transform: rotate(40deg);
}
/*
扭曲,倾斜动画
单位:deg
* */
.niuqv {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: cyan;
}
.niuqv:hover {
transform: skew(30deg, 30deg);
}
/*
矩阵动画
单位:数值
matrix() 6个属性的意思的:
第一个宽度比例1就是原大小,
第二个是上下倾斜1就是2倍,2就是3倍,0就是不倾斜
第三个是左右倾斜,数字和第二个一样的意思,
第四个是高度比例1就是原大小,
第五个是X方向的像素位移,X方向就是左右,
第六个是Y方向的像素位移,X方向就是上下
* */
.jvzhen {
width: 200px;
height: 200px;
margin-top: 20px;
background-color: darkslategray;
}
.jvzhen:hover {
transform: matrix((10,2,4,1,100,100)
}
</style>
</head>
<body>
缩放
<div class="suofang"></div>
位移
<div class="weiyi"></div>
旋转
<div class="xuanzhuan"></div>
扭曲,倾斜
<div class="niuqv"></div>
缩放
<div class="suofang"></div>
位移
<div class="weiyi"></div>
旋转
<div class="xuanzhuan"></div>
扭曲,倾斜
<div class="niuqv"></div>
矩阵
<div class="jvzhen"></div>
<div class="jvzhen"></div>
</body>
</html>