a demo for css transform and transition

把滑鼠放過來看看表徵圖是怎麼動起來的

代碼：

/**/<br />img:hover{<br /> -moz-transform:rotate(-130deg);<br /> -webkit-transform:rotate(30deg);<br /> transform:rotate(30deg);<br />}<br />/*beside linear also have ease,ease-in,ease-out,ease-in-out*/<br />a:hover {<br /> color: red;<br /> -webkit-transition: color .25s linear .2s;<br /> transition: color .25s linear .2s;<br />}

這是別人寫的一段代碼：

.pre {<br />font-family:微軟雅黑;<br />width:420px;<br />border:3px solid red;<br />/*for IE*/<br />filter : progid:DXImageTransform.Microsoft.Matrix(SizingMethod="auto expand",M11=1,M12=-0.4,M21=0.4,M22=1);<br />/*for firefox*/<br />-moz-transform:translate(100px) rotate(35deg);<br />-moz-transform-origin:40% 100%;<br />/*for chrome,safari*/<br />-webkit-transform:translate(100px) rotate(35deg);<br />-webkit-transform-origin:40% 100%;<br />}

下面是transition的例子，只有chrome支援。

上和吉恩什麼是什麼呢？看看chrome是如何變色的。