当前位置主页 > 资料库 > 前端教程 > CSS Transforms:让你的网页舞动起来

CSS Transforms:让你的网页舞动起来

04-24

CSS Transforms是我们制作CSS3动画的主要属性之一。Transforms的中文是变形的意思,它可以完成的功能主要包括:旋转rotate扭曲skew缩放scale移动translate以及矩阵变形matrix

CSS Transforms又分为2D Transforms 和3D Transforms。下面我们来分别介绍。

Transforms语法:

transform : none | <transform-function> [ <transform-function> ]* 
也就是:
transform: rotate | scale | skew | translate |matrix;                              
                            

CSS 2D Transforms

浏览器对CSS 2D Transforms的支持

浏览器对CSS 2D Transforms的支持

浏览器对2D Transforms的支持比3D Transforms要广泛一些。2D transforms包括rotate() / skew() / scale() / translate()等。

这个div被倾斜了,注意文字仍然是可选择的。
这个div被缩小了,文字也是可选择的。
这个div被旋转了,文字也是可选择的。
这个div使用了translate()。
这个div使用了上面的4个属性。

上面的效果使用的是下面的代码(下面的代码没有使用浏览器厂商的前缀):

#skew {
  transform:skew(35deg);
}
#scale {
  transform:scale(1,0.5);
}
#rotate {
  transform:rotate(45deg);
}
#translate {
  transform:translate(10px, 20px);
}
#rotate-skew-scale-translate {
  transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
}                              
                            

CSS transforms也可以使用transitions来制作动画效果。

用鼠标滑过这里看看效果!

CSS 3D Transforms

浏览器对CSS 3D Transforms的支持

浏览器对CSS 3D Transforms的支持

3D CSS transforms和2D CSS transforms基本相同。它的基本属性有:translate3dscale3drotateXrotateYrotateZtranslate3dscale3d。它可以使元素在3D空间中进行旋转和翻转等。

rotateX
rotateY
rotateZ

Hover me

上面的例子的代码如下(没有添加浏览器厂商的前缀):

#transDemo4 div {
  transition:all 2s ease-in-out;
  perspective: 800px;
  perspective-origin: 50% 100px;
}
#transDemo4:hover #rotateX {
  transform:rotateX(180deg);
}
#transDemo4:hover #rotateY {
  transform:rotateY(180deg);
}
#transDemo4:hover #rotateZ {
  transform:rotateZ(180deg);
}                              
                            
CSS 3D Transforms制作一个立方体

1

2

3

4

5

6

你可以通过上面的控制条来变化立方体的各种3D透视效果:这些值的变化是通过jQuery代码来实现的。

CSS 3D Transforms制作一个3d幻灯片

3d幻灯片-1

3d幻灯片-2

3d幻灯片-3

3d幻灯片-4

Image 1 Image 2 Image 3 Image 4

点击上面的按钮来查看3d幻灯片效果!

小结

CSS Transforms可以使页面元素进行倾斜、旋转、翻转,还可以实现相应的2D和3D变换动画。使用CSS Transforms可以使我们的页面从枯燥无味变得生动起来。但是目前浏览器对CSS Transforms的支持有所欠缺,不过所有最新版本的现代浏览器都支持它。我们是时候使用CSS Transforms适当的为我们的网页添加一个炫酷的效果了。

Previous:
上一篇:使用CSS3制作SVG图标动画特效
Next:
下一篇:CSS背景动画和多重背景动画
返回顶部