css3 中的2D转换
Posted nyw1983
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 中的2D转换相关的知识,希望对你有一定的参考价值。
一、CSS3转换
通过转换实现对对元素进行旋转、缩放、移动、拉伸的效果;这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成。 2D转换采用transform属性来实现效果。
二、transform属性的取值
- rotate()函数 是可以进行旋转的函数
- scale()函数 可以进行缩放的函数
三、函数的用法
transform:rotate( deg);旋转
- 将transform属性的取值设置为rotate函数,在括号里的是旋转的角度,其单位是deg(degree程度),所需要设置角度的值可以是正值,也可以是负值。
- 正值按照顺时针进行旋转(向左);负值按照逆时针进行旋转(向右)
- 在我们编辑代码的时候可以使用 trsf 扩展 前缀也会随之被扩展出来(随机,输入trsf不一定出现的是transform:rotate()属性值)
实例一:
构建一个div盒子,实现鼠标悬停时盒子顺时针旋转30deg的效果。(如果我们将角度设置为负值,则会向左侧倾斜)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2D转换</title> 6 <style> 7 body 8 position: relative; 9 width: 400px; 10 height: 400px; 11 /*top: 100px;*/ 12 /*left: 100px;*/ 13 /*border:2px solid red;*/ 14 15 16 div 17 width: 100px; 18 height: 75px; 19 background-color: #939; 20 border:2px solid blue; 21 position: absolute; 22 23 #rotateDiv 24 top:300px; 25 left:100px; 26 27 #rotateDiv:hover 28 transform:rotate(30deg); 29 ; 30 </style> 31 </head> 32 <body> 33 <div id="rotateDiv">transform2</div> 34 </body> 35 </html>
表现效果:
transform:scale(x,y); 缩放
- 将transform属性的取值设置为scale函数时,则可以设置水平方向和垂直方向上的缩放比例。
- x:水平方向(横向的)缩放的倍数。y:垂直方向(高度)上的缩放的倍数,若省略,同x的取值(如transform:scale(1.3)表示水平和垂直都是1.3倍数)
- x和y的取值设置在(0~1)之间表示缩小,(>1)表示放大
实例二:
实现盒子鼠标悬停上时,盒子放大1.3倍的效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2D转换</title> 6 <style> 7 body 8 position: relative; 9 width: 400px; 10 height: 400px; 11 /*top: 100px;*/ 12 /*left: 100px;*/ 13 /*border:2px solid red;*/ 14 15 div 16 width: 100px; 17 height: 75px; 18 background-color: #939; 19 border:2px solid blue; 20 position: absolute; 21 22 #box1:hovertransform:scale(1.3) 23 </style> 24 </head> 25 <body> 26 <div id="box1">transform1</div> 27 </body> 28 </html>
表现效果:
以上是关于css3 中的2D转换的主要内容,如果未能解决你的问题,请参考以下文章