Als IE (alle versies tot en met versie 8) zich had geconformeerd met de W3C-standaard had deze pagina een kwart van de code nodig gehad. IE9 is zo "slim" om de native (transform) functies niet meer te ondersteunen zonder de CSS3-equivalenten te ondersteunen. Het is ook jammer dat de "native" transform-functies van IE (een heel klein beetje) javascript nodig hebben om überhaupt te kunnen starten. Ondanks dat laatste staat deze pagina toch bij de "css-afdeling", want 99.99% van de IE-gebruikers kunnen deze pagina "draaien" en voor de strict browsers geldt hezelfde (mits de bezoeker zijn CSS niet bewust heeft uitgeschakeld). Plaats de stylesheet in de head-sectie van de pagina, en de html-code en het stukje javascript in de body sectie van de pagina.
<style type="text/css">
dd{margin:0}
dl.transform-rotate{
display:block}
dl.transform-rotate dd a img{
display:block;
z-index:2;
border:0;
position:absolute;
left:0;
top:50px;
width:0px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
-ms-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
transition: all 1s ease-in-out}
dl.transform-rotate dd a:hover img{
left:350px;
top:50px;
width:220px;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0)}
.clear_both{clear:both}
</style>
<dl class="transform-rotate">
<dd><a onmouseover="id_1.style.filter='progid:DXImageTransform.Microsoft.Wheel(spokes=2)'; wheel_transition(id_1,'transform-rotate-1.jpg')"
href="http://kompoos.nl/css/image-effects/css-animation-transform.html">1-transform-rotation-plaatje<img id="id_1" src="transform-rotate-1.jpg" alt="rotate-1" /></a></dd>
<dd><a onmouseover="id_2.style.filter='progid:DXImageTransform.Microsoft.Wheel(spokes=3)'; wheel_transition(id_2,'transform-rotate-2.jpg')"
href="http://kompoos.nl/css/image-effects/css-animation-transform.html">2-transform-rotation-plaatje<img id="id_2" src="transform-rotate-2.jpg" alt="rotate-2" /></a></dd>
<dd><a onmouseover="id_3.style.filter='progid:DXImageTransform.Microsoft.Wheel(spokes=2)'; wheel_transition(id_3,'transform-rotate-3.jpg')"
href="http://kompoos.nl/css/image-effects/css-animation-transform.html">3-transform-rotation-plaatje<img id="id_3" src="transform-rotate-3.jpg" alt="rotate-3" /></a></dd>
<dd><a onmouseover="id_4.style.filter='progid:DXImageTransform.Microsoft.Wheel(spokes=3)'; wheel_transition(id_4,'transform-rotate-4.jpg')"
href="http://kompoos.nl/css/image-effects/css-animation-transform.html">4-transform-rotation-plaatje<img id="id_4" src="transform-rotate-4.jpg" alt="rotate-4" /></a></dd>
<dd><a onmouseover="id_5.style.filter='progid:DXImageTransform.Microsoft.Wheel(spokes=2)'; wheel_transition(id_5,'transform-rotate-5.jpg')"
href="http://kompoos.nl/css/image-effects/css-animation-transform.html">5-transform-rotation-plaatje<img id="id_5" src="transform-rotate-5.jpg" alt="rotate-5" /></a></dd>
<dd><a onmouseover="id_6.style.filter='progid:DXImageTransform.Microsoft.Wheel(spokes=3)'; wheel_transition(id_6,'transform-rotate-6.jpg')"
href="http://kompoos.nl/css/image-effects/css-animation-transform.html">6-transform-rotation-plaatje<img id="id_6" src="transform-rotate-6.jpg" alt="rotate-6" /></a></dd>
<dd><a onmouseover="id_7.style.filter='progid:DXImageTransform.Microsoft.Wheel(spokes=2)'; wheel_transition(id_7,'transform-rotate-7.jpg')"
href="http://kompoos.nl/css/image-effects/css-animation-transform.html">7-transform-rotation-plaatje<img id="id_7" src="transform-rotate-7.jpg" alt="rotate-7" /></a></dd>
<dd><a onmouseover="id_8.style.filter='progid:DXImageTransform.Microsoft.Wheel(spokes=3)'; wheel_transition(id_8,'transform-rotate-8.jpg')"
href="http://kompoos.nl/css/image-effects/css-animation-transform.html">8-transform-rotation-plaatje<img id="id_8" src="transform-rotate-8.jpg" alt="rotate-8" /></a></dd>
<dd><a onmouseover="id_9.style.filter='progid:DXImageTransform.Microsoft.Wheel(spokes=2)'; wheel_transition(id_9,'transform-rotate-9.jpg')"
href="http://kompoos.nl/css/image-effects/css-animation-transform.html">9-transform-rotation-plaatje<img id="id_9" src="transform-rotate-9.jpg" alt="rotate-9" /></a></dd>
</dl>
<script>
function wheel_transition (_object,afbeelding) {
_object.filters(0).Apply();
_object.src=afbeelding;
_object.filters(0).Play();}
</script>