码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 2D 转换

时间:2019-08-08 23:40:37      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:编辑   如何使用   效果   image   设置   创建   col   box   css   

2D转换方法:在平面对元素进行旋转,缩放,移动,拉伸。

 

㈠浏览器支持

⑴2D转换效果有以下的浏览器支持:

技术图片

 

⑵在编辑代码的时候要注明用哪种浏览器打开,在前面加上前缀,下面是编辑器的简写形式,以及前缀名: 

技术图片

 

㈡ transform 属性

⑴rotate()   进行旋转的函数

⑵scale()    进行缩放的函数

 

㈢旋转   transform:rotate()

⑴rotate函数可以设置旋转的角度,在括号里带有的参数,就是它的角度,单位是deg(degree),设置角度的值,可以是正值,也可以是负值。如果是正值,那么就是顺时针地旋转,如果是负值,就是逆时针旋转。

 

⑵例如:做两个盒子,第一个盒子是正常显示的,第二个盒子是旋转一定角度的。第一个盒子用div标签完成,第二个盒子是引用了一个ID类型的样式,这个样式的名字就是rotateDiv。看一下样式的定义,两个盒子共同的样式:在div标签作为样式的名字,里面来定义它的高度,宽度,背景颜色和边框。第一个盒子就按上面的样式正常显示出来,第二个盒子显示的方式在rotateDiv里面,采用transform这个属性设置为rotate函数,顺时针旋转30度。

 

⑶代码及效果如下图所示: 

技术图片

 效果图:

技术图片

 

 ㈣缩放    transform:scale()

⑴ transform:scale(x,y)     可以设置水平,垂直方向两个值,具体如下图所述:

技术图片

 

⑵ 如果我们希望鼠标悬停在上面的时候,它有一个缩放的效果,可以加上以下的一条代码:

.box:hover{

                    transform:scale(1.2);

                 } 

 

㈤translate() 方法

⑴通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

⑵例如:值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素:

技术图片

 

 ㈥skew() 方法

⑴通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:

⑵例如:值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度:

 技术图片

 

 ㈦matrix() 方法

⑴matrix() 方法把所有 2D 转换方法组合在一起。

⑵matrix() 方法需要六个参数,包含数学函数,允许:旋转、缩放、移动以及倾斜元素。

⑶例如:如何使用 matrix 方法将 div 元素旋转 30 度:

技术图片

 

 

 ㈧利用CSS3 transform 属性做示例

 本例演示如何创建“宝丽来”图片,并旋转图片,在谷歌浏览器中打开:

 技术图片

 效果图:

技术图片

 

 

㈨总结2D transform 的方法

 技术图片

 

       希望有所帮助。

CSS3 2D 转换

标签:编辑   如何使用   效果   image   设置   创建   col   box   css   

原文地址:https://www.cnblogs.com/shihaiying/p/11322365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!