IE9 heeft geen support meer voor een aantal transform-functies. Dat was niet zo erg geweest, ware het niet dat er geen vervangende functies voor in de plaats zijn gekomen. Chrome, Safari, Opera en (nu ook de laatste versie van) Mozilla hebben zeer fraaie transforms "in de aanbieding". Met wat verstandig "progressive enhancement" is er verder niets aan de hand. IE9-bezoekers zullen niets merken van het gemis aan mooie overgangen etc. Plaats de stylesheet in de head-sectie van de pagina, en "doe" de overige code in de body-sectie.
<style type="text/css">
.rotate-effect{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
float:left;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s}
.rotate-effect img{
padding:10px;
border:1px solid #808080}
.rotate-effect:hover{
-webkit-transform:scale(1.0);
-webkit-box-shadow:0px 0px 30px #bbb;
-moz-transform:scale(1.0);
-moz-box-shadow:0px 0px 30px #bbb;
-o-transform:scale(1.0);
-o-box-shadow:0px 0px 30px #bbb}
.rotate-effect .css_image_effect{
width: 100%;
background-color: rgb(0, 0, 0);
color:inherit;
position: absolute;
height: 100%;
opacity:0.6;
cursor:pointer;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s}
#image_effect_rotate:hover .css_image_effect{
height:0%;
width:0%;
-webkit-transform: rotateX(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(-360deg)}
.clear_both{
clear:both}
</style>
<!--[if IE]>
<style type="text/css">
.css_image_effect{
display:none}
#image_rotate{
-ms-filter: "progid:DXImageTransform.Microsoft.Wheel(duration=0.5, spokes=3)";
filter :progid:DXImageTransform.Microsoft.Wheel(duration=0.5, spokes=3);
width: 100%;
height:100%}
#image_rotate img{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50)}
#image_rotate:hover img{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
</style>
<![endif]-->
<div class="rotate-effect" id="image_effect_rotate">
<div class="css_image_effect" ></div>
<div id="image_rotate" onmouseover="javascript:ie_image_effect();">
<img id="image_rotate_ie" src="css-effect-rotate.jpg" height="245" width="220" alt="image effect rotate css" />
</div>
</div>
<div class="clear_both"></div>
<script>
var image_rotate=document.getElementById("image_rotate");
function ie_image_effect(){
if(image_rotate.filters.item("DXImageTransform.Microsoft.Wheel").status!==2){
image_rotate.filters[0].apply();
image_rotate.filters[0].play();
}
}
</script>