CR的代码文本

all for learning about the world
  订阅 订阅  :: 管理

多拉A梦的CSS(1) - Transform

Posted on 2010-05-17 19:08  mumuliang  阅读(404)  评论(0编辑  收藏  举报

内容主要来自:http://www.the-art-of-web.com/css/css-animation/

简介

transform通过平移、旋转等方法来定义页面元素的外观。在页面rendered之前,css文件中transform定义的外观就被apply了,因此页面上是看不到animatioin的。不过你也可以通过mouseover等。。。嗯,你知道的。

水果公司要求对transform对3d的支持,但路漫漫其修远。尚有许多浏览器对transform都不支持,各大厂商都还在为敲定CSS modules而扯皮。

言归正传,下面咱干正事儿吧。

设置四个同样style的div:宽100px,高60px,2px green 的border。

接下来,把4个div都transform了。如下

注:firefox现在支持transform了,语法也同下(你一直知道的,本文的默认浏览器是safari)。你只需要把 -webkit 换成 -moz 即可。

box 1 右移:
box 2 顺时针旋转30度:
box 3 左平移下平移:
box 4 缩放为原来的2倍:

没有transform的时候,四个盒子如下,仿佛红盒子有了3个绿分身(咦,不是说都是green border么?)。


使用transform了以后,盒子们就变成了这样。


注意:文字会跟着一起旋转。另外缩放时,文字和border都会随之变化。

(图中box1、box2、box3有遮挡,有白色填充的效果,而Firefox中无填充。)

让你的transform动起来

transform是一个强大到令人发抖(真的没有别的原因么?-_-)的工具。对animate使用"color: #008080;" 

 1  1 <style type="text/css"> 
 2  2 
 3  3 .showbox {
 4  4  color: #000000;">: all 1s ease-in-out;
 5  5 }
 6  6 .slideright:hover {
 7  7  color: #000000;">: translate(3em,0);
 8  8 -moz-transform: translate(3em,0);
 9  9 }
10 10 .rotate:hover {
11 11  color: #000000;">: rotate(30deg);
12 12 -moz-transform: rotate(30deg);
13 13 }
14 14 .slideleft:hover {
15 15  color: #000000;">: translate(-3em,1em);
16 16 -moz-transform: translate(-3em,1em);
17 17 }
18 18 .scale:hover {
19 19  color: #000000;">: scale(2);
20 20 -moz-transform: scale(2);
21 21 }
22 22 
23 23 </style>
24 24 
25 25 <div class="showbox slideright">box 1</div>
26 26 <div class="showbox rotate" style="border-color: red;">box 2</div>
27 27 <div class="showbox slideleft">box 3</div>
28 28 <div class="showbox scale">box 4</div>

 

 

 

嗯,你会发现你发现的有趣内容。

css当然还可以控制其他的东西比如boder,color,但与transform无关的就不说了。

一个元素的多重transform

就像这样:

你还可以在分号之前加上translate(1em,0),用空格隔开。

多拉A梦的Transform

在多拉A梦的CSS中的transform只用了rotate

例如#head_light中的

 

rotate(20deg);
2 -moz-transform: rotate(20deg);
3 -o-transform: rotate(20deg);

 

 

-o-transform应该是Opera有效。