本篇文章介绍的是关于css3中transform属性实现的4种功能(旋转、缩放、倾斜、移动),分享给大家,希望对你有所帮助。
1 transform属性
在CSS3中,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。
(1)浏览器支持
到目前为止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。
2 旋转
使用rotate方法,在参数中加入角度值,角度值后面跟表示角度单位的“deg”文字即可,旋转方向为顺时针方向。
1 | transform:rotate( 45 deg);
|
3 缩放
使用scale方法来实现文字或图像的缩放处理,在参数中指定缩放倍率。
1 | transform:scale( 0.5 );//缩小一半
|
(1)可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率
1 | transform:scale( 0.5 , 2 );//水平方向缩小一半,垂直方向放大一倍。
|
4 倾斜
使用skew方法实现文字或图像的倾斜处理,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
1 | transform:skew( 30 deg, 30 deg);//水平方向上倾斜 30 度,垂直方向上倾斜 30 度。
|
(1)只使用一个参数,省略另一个参数
这种情况下视为只在水平方向上进行倾斜,垂直方向上不倾斜。
5 移动
使用translate方法来移动文字或图像,在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。
1 | transform:translate( 50px , 50px );// 水平方向上移动 50px ,垂直方向上移动 50px
|
(1)只使用一个参数,省略另一个参数
这种情况下视为只在水平方向上移动,垂直方向上不移动。
1 | transform:translate( 50px );
|
6 对一个元素使用多种变形的方法
1 | transform:translate( <code class="css value" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; bottom: auto !important; float: none !important; left: auto !important; line-height: 1.5em !important; outline
|