近来，HTML5和CSS3的发展速度还是很可观的，国内外不乏一些大站，酷站都在使用最新的技术。面对新的技术，我们该如何正确的把握和使用到今后的项目实战中呢？针对这一问题，浩子决定剖析CSS3，一一像各位同学解答CSS3到底是个神马东西。就已transform开始吧，写的不好的话，请严重拍砖！！
CSS3 transform是什么？
transform的含义是：改变，使…变形；转换
CSS3 transform都有哪些常用属性？
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
下面我们来分解各个属性的用法：
transform:rotate()：
含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。
.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}登录后复制
transform:skew()：
含义：倾斜；
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}登录后复制
transform:scale()：
含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。
.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}登录后复制
transform:translate()：
含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。
.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}登录后复制
transform综合：
transform的常用属性就是这些了，下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例：
.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0)translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0)translate(100px,0)}登录后复制
以上就是CSS3中关于transform的详细介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3121798.html
