css3变形讲解
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效果会更简单，方便。
如有问题，请提出，谢谢
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
