css3变形讲解

标签：blog   http   color   ar   for   2014   问题   div   log   

Transform变形：可以实现文字或者图片旋转、缩放、倾斜和移动，并且该元素下的所有子元素都随着父元素一样。

既然接触到transform，我们就可以做好多3d的效果啦

旋转：transform：rotate（角度deg）deg是css3的“Values and Units”模块中定义的一个角度单位

<div class="box1"></div>

.box1{width:200px;height:100px;background:#f66f17;margin:60px 0;-webkit-transform:rotate(30deg);transform:rotate(30deg);}

缩放：transform：scale（比例）正数表示放大，负数表示缩小。

<div class="box2"></div>

.box2{width:200px;height:100px;background:#f66f17;margin:60px 0;--webkit-transform:scale(2);transform:scale(2);}

倾斜：transform：skew（角度deg）

<div class="box3"></div>

.box3{width:200px;height:100px;-webkit-transform:skew(30deg);transform:skew(30deg);background:#f66f17;margin-top:60px;}

<div class="box4">
文字
</div>

.box4{color:#fff;font-size:30px;font-weight:bold;-webkit-transform:translate(120px,10px);transform:translate(120px,10px);width:100px;height:50px;background:#333;}

熟悉这些，做3d效果会更简单，方便。

如有问题，请提出，谢谢

css3变形讲解

标签：blog   http   color   ar   for   2014   问题   div   log   

原文地址：http://www.cnblogs.com/fs521cw/p/3941973.html