Experimental features - CSS Transform and Animation -moz-transform: -moz-animation: @-moz-keyframe

Experimental features - CSS Transform and Animation -moz-transform: -moz-animation: @-moz-keyframe Equivalent for Chrome/Safari: -webkit-transform: Equivalent for Opera *blank* transform: Equivalent for IE NONE :(

CSS “pseudoclasses” Hover #my_div { /*Always applied styles*/ } #my_div:hover { /*Only applied on hover*/ }

CSS Transforms: -moz-transform: rotateX(_deg) rotateY(_deg) rotateZ(_deg) translateX(_px) translateY(_px) translateZ(_px);

CSS animation: -moz-animation: (anim_name) 10s linear; -moz-animation-iteration-count: infinite; //loop infinitely -moz-animation-direction: alternate; //reverse before looping

Animations and Keyframes: @-moz-keyframes anim_name { to { /*styles at start*/ } from { /*styles at end*/ } 50% { /*styles at halfway*/ } }

Special Selectors: + for literal next (on same level) ~ for all of “type” afterwards (on same level) #id_1 + #id_2 { } <div id=”id_1”></div> <div id=”id_2”></div>

See also: http://www.useragentman.com/tests/cssSandpaper/cube3.html http://www.cssplay.co.uk/boxes/jack-in-the-box.html http://desandro.github.com/3dtransforms/examples/cube-02-show-sides.html

<style type="text/css"> #test2:hover ~ .test1 { background-image:url("bird.png"); width: 500px; height: 500px; -moz-animation: test_anim 15s linear; } @-moz-keyframes test_anim {//5 0%{ width:500px; height:500px; -moz-transform: rotateX(0deg) rotateY(0deg); } 50% { height:1000px; } 100% { -moz-transform: rotateX(360deg) rotateY(720deg); width:1000px; height:500px; } } </style> <body> <div id="test2">mouseoverme bro</div> <br /> <br /> <br /> <div class="test1">wololol</div> <div class="test1">SADSADSADSAD</div> </body> Final Section Code

Experimental features - CSS Transform and Animation -moz-transform: -moz-animation: @-moz-keyframe