A demo for CSS transform and transition

Move the mouse over to see how the icon moves.

Code:

/**/<Br/> IMG: hover {<br/>-moz-transform: Rotate (-130deg); <br/>-WebKit-transform: rotate (30deg); <br/> transform: Rotate (30deg); <br/>}< br/>/* beside linear also have success, skip-in, encoding-out, encoding-in-out */<br/> A: hover {<br/> color: red; <br/>-WebKit-transition: color. 25 s linear. 2 S; <br/> transition: color. 25 s linear. 2 S; <br/>}

This is a piece of code written by someone else:

. 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/>}

The following is an example of transition, which is only supported by chrome.

What is it with Jean? Let's see how chrome changes color.