CSS3-2D转换
2017-11-25 本文已影响27人
相关函数
transform属性
transform属性能对元素实现一些变形功能,他可以用于内联元素和块级元素.该属性可以旋转,缩放,移动元素.
- 常用的变形函数如下:
translate()
scale()
rotate()
shew()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Joe</title>
<style type="text/css">
li{
background: red;
margin: 10px;
width: 80px;
height: 80px;
list-style: none;
float: left;
}
#rotate:hover{
background: yellow;
transform: rotate(30deg);
}
#translate:hover{
background: green;
transform: translate(-10px,10px);
}
#scale:hover{
background: pink;
/*transform: scale(2);*/
transform: scaleX(.5);
}
#shew:hover{
background: saddlebrown;
-webkit-transform: skew(30deg,20deg);/*Safari&&Chrome*/
-moz-transform: shew(30deg,20deg);/*Firefox*/
-ms-transform: shew(20deg,20deg);/*IE9*/
}
</style>
</head>
<body>
<div id=""mydiv>
<ul>
<li id='rotate'><a href="#"></a></li>
<li id='translate'><a href="#"></a></li>
<li id='scale'><a href="#"></a></li>
<li id='shew'><a href="#"></a></li>
</ul>
</div>
</body>
</html>
