<html>
<head>
<title>Abakada CSS Demo: rotateZ( ) Transform</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style>
#theImg { transition: transform 1.5s }
</style>
<script language="JavaScript">
<!--
function chgAngle ( ) {
var sa = oAngle.value;
var su = oUnit.value;
myImg = document.getElementById ('theImg');
myImg.style.transform="rotateZ( " + sa + su + " )";
txt = "Syntax { transform: rotateZ( " + sa + su + " )";
theSyntax.innerText = txt;
}
function reset ( ) {
myImg = document.getElementById ('theImg');
oAngle.value = 0;
oUnit.value = "deg";
myImg.style.transform="rotateZ( 0deg )";
theSyntax.innerText = "Syntax { transform: rotateZ( 0deg ) }";
}
//-->
</script>
</head>
<body>
<div class="header"><h2>Abakada CSS Demo: <b>rotateZ( )</b> Transform</h2></div>
<hr size=1 width=92%>
<center>
<p>This example illustrates the effects of applying the <b>rotateZ( )</b> function <br>
to change an element's position in relation to its Z-axis.</p>
<br>
<img id="theImg" src="/shared/images/earth.png" width="300" border="0" alt=""></div>
<br>
<h4 id="theSyntax">Syntax { transform: rotateZ( 0deg ) }</h4>
<p><b>Select from these options to modify the image's position.</b></p>
<p>Angle of rotation:
<select id="oAngle" name="oAngle" onchange="chgAngle ( )">
<option value="" selected>
<option value="-160">-160
<option value="-80">-80
<option value="-40">-40
<option value="-20">-20
<option value="-10">-10
<option value="0" selected>0
<option value="10">10
<option value="20">20
<option value="40">40
<option value="80">80
<option value="160">160
</select>
Unit:
<select id="oUnit" name="oUnit" onchange="chgAngle ( )">
<option value="deg" selected>degrees
<option value="grad">gradians
<option value="rad">radians
<option value="turns">turns
</select></p>
<p><button onclick="reset ( )">Reset</button></p>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>