css3的变形功能类型有哪些
这篇文章主要讲解了“css3的变形功能类型有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3的变形功能类型有哪些”吧!
创新互联公司-专业网站定制、快速模板网站建设、高性价比宁晋网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式宁晋网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖宁晋地区。费用合理售后完善,十余年实体公司更值得信赖。
css3的变形功能包括4种类型:1、旋转,利用rotate()、rotateX()等实现;2、缩放,利用scale()、scaleX()等实现;3、倾斜,利用skew()、skewX()等实现;4、移动,利用translate()等实现。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
变形主要值得是利用transform功能来实现文字或图片的旋转,缩放,倾斜,移动这四种处理。
1、旋转-----transform:rotate(xxdeg);
( IE9以上,safari 3.1以上,chrome 8以上、FireFox 4以上、Opera 10以上的浏览器都支持这些属性)
先看例子:
这是一个测试。
#test3{ width:300px; margin: 100px auto; font-size: 40px; transform:rotate(45deg); }
transform:rotate(45deg);这句表示p元素顺时针45度旋转,deg是一个角度单位。效果如下:
2、缩放-----transform:scale(x)
这是一个测试。
#test4{ width:300px; margin: 100px auto; font-size: 40px; transform:scale(0.5); }
也可以分别指定元素水平和垂直方向上的缩放。例如,元素在水平方向缩小50%,在垂直方向放大一倍:
这是一个测试。
#test5{ width:300px; margin: 100px auto; font-size: 40px; transform:scale(0.5,2); }
上面两个缩放的效果如下:
3、倾斜:使用skew方法来实现文字或图片的倾斜处理,两个参数分别指定水平方向上的倾斜角度和垂直方向的倾斜角度。例子:
这是一个测试。
#test6{ width:300px; margin: 100px auto; font-size: 40px; transform:skew(30deg,45deg); }
若只有一个参数,默认只在水平方向上倾斜,不在垂直方向倾斜。
4、移动:使用translate方法,两个参数分别指定水平方向和垂直方向上的移动距离。若只有一个参数,默认只在水平方向上移动,垂直方向上不移动。
这是一个测试。
#test7{ width:300px; margin: 100px auto; font-size: 40px; transform:translate(150px,150px); }
这些变形也可以组合使用:
这是一个测试。
#test8{ width:300px; margin: 100px auto; font-size: 40px; transform:rotate(45deg) scale(0.5) skew(30deg,45deg) translate(150px,150px); }
将元素45度顺时针旋转,在缩小一半,然后在水平方向倾斜30度,在垂直方向倾斜45度,在分别在水平和垂直方向上移动150px,效果如下:
可以指定变形的基点:在使用transform进行变形时,是以元素的中心为基准点进行的。使用transform-origin属性可以改变基准点。
这是一个测试。
这是一个测试。
#test9{ position: absolute; width:150px; height:150px; background: green; margin: 100px 200px; font-size: 20px; transform:rotate(45deg); }#test10{ position: absolute; width:150px; height:150px; background: red; margin: 100px 200px; font-size: 20px; transform-origin:left top; /*定基准点*/ transform:rotate(45deg) }
效果如下:(红色是把基准点顶到左上点的,绿色是默认的)
transform-origin属性的取值,前一个是“基准点在元素水平方向上的位置”,可以指定的值有:left,center,right;后一个值是“基准点在元素垂直方向上的位置”,可以指定的值有:top,center,bottom.
感谢各位的阅读,以上就是“css3的变形功能类型有哪些”的内容了,经过本文的学习后,相信大家对css3的变形功能类型有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
文章标题:css3的变形功能类型有哪些
本文来源:http://scyanting.com/article/gojdig.html