语法:transform:none | <transform-function>[transform-function]*
常用的变形函数有: 1.matrix():定义矩阵变换
2.translate();移动元素
3.scale();缩放元素
4.rotate();旋转元素
5.skew();倾斜元素对象
语法:transition: property duration timing-function delay;
简单实例:
1.使用旋转和缩放函数对元素进行变换,同时添加transition属性对动画进行平稳过度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#haha {
width: 100px;
height: 100px;
border: solid 1px green;
margin: 0 auto;
margin-top: 100px;
background-color: pink;
/*定义动画过程*/
-webkit-transition: transform .5s ease-in;
-moz-transition: transform .5s ease-in;
-ms-transition: transform .5s ease-in;
-o-transition: transform .5s ease-in;
transition: transform .5s ease-in;
}
#haha:hover {
-webkit-transform: rotate(180deg) scale(2);
-moz-transform: rotate(180deg) scale(2);
-ms-transform: rotate(180deg) scale(2);
-o-transform: rotate(180deg) scale(2);
transform: rotate(180deg) scale(2);
}
</style>
</head>
<body>
<div id="haha"></div>
</body>
</html>
2.使用skew进行元素的平移。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.test ul{
list-style:none;
}
.test li{
float:left;
width:100px;
background:#ccc;
text-decoration: none;
line-height:30px;
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-o-transform: skew(10deg);
transform: skew(10deg);
}
.test a{
display:block;
text-align:center;
height:30px;
}
.test a:link{
color:#666;
text-decoration:none;
}
.test a:visited{
color:#666;
text-decoration: underline;
}
.test a:hover{
color:#fff;
background-color:darkred;
font-weight: bold;
text-decoration: none;
-webkit-transform: scale(1.1) translate(4px,4px) skew(5deg);
-moz-transform: scale(1.1) translate(4px,4px) skew(5deg);
-ms-transform: scale(1.1) translate(4px,4px) skew(5deg);
-o-transform: scale(1.1) translate(4px,4px) skew(5deg);
transform: scale(1.1) translate(4px,4px) skew(5deg);
}
</style>
</head>
<body>
<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">新闻</a></li>
<li><a href="3">论坛</a></li>
<li><a href="4">博客</a></li>
<li><a href="5">团购</a></li>
<li><a href="6">微博</a></li>
</ul>
</div>
</body>
</html>
3.使用transition定义元素过度的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
background-color: #ffff00;
color: #000000;
width: 500px;
-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
-ms-transition: background-color 1s linear, color 1s linear, width 1s linear;
-o-transition: background-color 1s linear, color 1s linear, width 1s linear;
transition: background-color 1s linear, color 1s linear, width 1s linear;
}
div:hover {
background-color: #003366;
color: #ffffff;
width: 600px;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<div>新闻 网页 贴吧 知道 图片</div>
</body>
</html>