css3 中的2D转换

Posted nyw1983

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 中的2D转换相关的知识,希望对你有一定的参考价值。

一、CSS3转换

      通过转换实现对对元素进行旋转、缩放、移动、拉伸的效果;这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成。 2D转换采用transform属性来实现效果。

二、transform属性的取值

  • rotate()函数   是可以进行旋转的函数
  • scale()函数    可以进行缩放的函数

三、函数的用法

transform:rotate( deg);旋转

  • transform属性的取值设置为rotate函数,在括号里的是旋转的角度,其单位是degdegree程度),所需要设置角度的值可以是正值,也可以是负值。
  • 正值按照顺时针进行旋转(向左);负值按照逆时针进行旋转(向右)
  • 在我们编辑代码的时候可以使用 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倍数)
  • xy的取值设置在(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转换的主要内容,如果未能解决你的问题,请参考以下文章

css3 2D转换效果

Css3之高级-5 Css转换(简介2D转换3D转换)

CSS3的2D转换3D转换和过渡

CSS3 2D 转换

CSS3 2D 转换

css3 2d转换