experimental features - css transform and animation -moz-transform: -moz-animation: @-moz-keyframe...
TRANSCRIPT
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 IENONE :(
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