transform的功能

</head>
<style>
div{
width:300px;
margin:150px auto;
background-color:#09F;
text-align:center;
transform:rotate(45deg);//旋转45度

}
</style>
<body>
<div>文字</div>


</body>
</html>

</head>
<style>
div{
width:300px;
margin:150px auto;
background-color:#09F;
text-align:center;
transform:scale(1.5);//缩放

}
</style>
<body>
<div>文字</div>


</body>
</html>

倾斜的效果

</head>
<style>
div{
width:300px;
margin:150px auto;
background-color:#09F;
text-align:center;
transform:skew(30deg,30deg);//倾斜

}
</style>
<body>
<div>文字</div>


</body>
</html>

移动

</head>
<style>
div{
width:300px;
margin:150px auto;
background-color:#09F;
text-align:center;

transform-origin:top left;//基准点
transform:translate(250px,50px)//移动

}
</style>
<body>
<div>文字</div>


</body>
</html>

posted @ 2015-07-29 16:55  大发明家  阅读(100)  评论(0编辑  收藏  举报