用CSS回旋转DIV层
日期：2014-05-17 浏览次数：20740 次
用CSS来旋转DIV层
?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body,html {
padding: 20px;
}
.demo {
border: solid 2px #999999;
position: relative;
width: 170px;
height: 243px;
padding: 40px 30px 35px 35px;
margin-top: 92px;
background: url(/media/img/sprite.png) 0 -170px no-repeat;
color: #173956;
margin-bottom: 5px;
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
z-index: 100;
position: relative;
}
</style>
</head>
<body>
<div class="demo">测试旋转div层</div>
</body>
</html>
?
效果图:
?
使用参考（http://www.css88.com/archives/2168）：
?
?
transform(变形)和transform-origin(变形原点)的说明：
- 目前这两个属性得到了除去ie以外各个主流浏览器webkit，firefox，opera的支持，属性名分别为 -webkit-transform，-moz-transform，-o-transform;
- transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
- 语法：-moz-transform-origin: [ <percentage> |?<length> | left |?center |?right ][ <percentage> |?<length> | top |?center |?bottom ] ?
- transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数 ;
- top left | left top 等价于 0 0；
- top | top center | center top 等价于 50% 0
- right top | top right 等价于 100% 0
- left | left center | center left 等价于 0 50%
- center | center center 等价于 50% 50%（默认值）
- right | right center | center right 等价于 100% 50%
- bottom left | left bottom 等价于 0 100%
- bottom | bottom center | center bottom 等价于 50% 100%
- bottom right | right bottom 等价于 100% 100%
- transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素 ，他有几个属性值参数：
- rota
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
