您的位置：首页 > Web前端 > HTML5

Html5 css3学习--2D变形

2016-10-08 10:34 375 查看

语法：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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航