属性值 | 说明 |
---|---|
none | 无变换 |
translate(长度值或百分数值) | 在水平方向、垂直方向或两个方向上平移元素 |
translateX(长度值或百分数值) | 在水平方向上平移元素 |
translateY(长度值或百分数值) | 在垂直方向上平移元素 |
scale(数值) | 在水平方向、垂直方向或两个方向上缩放元素 |
scaleX(数值) | 在水平方向上缩放元素 |
scaleY(数值) | 在垂直方向上缩放元素 |
rotate(角度) | 旋转元素 |
skew(角度) | 在水平方向、垂直方向或两个方向上使元素倾斜一定的角度 |
skewX(角度) | 在水平方向上使元素倾斜一定的角度 |
skewY(角度) | 在垂直方向上使元素倾斜一定的角度 |
matrix(4-6数值,逗号隔开) | 指自定义变换 |
当鼠标按住使一个div水平平移一定距离
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: black;
position: absolute;
top: 100px;
left: 100px;
/*可以用-webkit-transtion加一个过渡时间,使平移在1s的时间内完成*/
-webkit-transition: 1s all;
}
.div1:active{
transform: translateX(300px);
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
当鼠标放上去使一个div从中间缩放
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: black;
position: absolute;
top: 100px;
left: 100px;
/*可以用-webkit-transtion加一个过渡时间*/
-webkit-transition: 1s all;
}
.div1:hover{
transform: scale(1.4);
/*括号里数值大于1放大,小于1缩小*/
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
当鼠标放上去使一个div旋转360度
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: black;
position: absolute;
top: 100px;
left: 100px;
/*可以用-webkit-transtion加一个过渡时间*/
-webkit-transition: 2s all;
}
.div1:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
鼠标放上去使div倾斜60度
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: black;
position: absolute;
top: 100px;
left: 100px;
/*可以用-webkit-transtion加一个过渡时间*/
-webkit-transition: 2s all;
}
.div1:hover{
transform: skew(60deg);
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>