<html>
<head>
<title>Abakada CSS Demo: rotateY( ) Transform (2D)</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="rotateY( " + sa + su + " )";
txt = "Syntax { transform: rotateY( " + sa + su + " ) }";
theSyntax.innerText = txt;
}
function reset ( ) {
myImg = document.getElementById ('theImg');
oAngle.value = 0;
oUnit.value = "deg";
myImg.style.transform="rotateY( 0deg )";
theSyntax.innerText = "Syntax { transform: rotateY( 0deg ) }";
}
//-->
</script>
</head>
<body>
<div class="header"><h2>Abakada CSS Demo: <b>rotateY( )</b> Transform</h2></div>
<hr size=1 width=92%>
<center>
<p>This example illustrates the effects of applying the <b>rotateY( )</b> function <br>
to change an element's position in relation to its Y-axis.</p>
<br>
<img id="theImg" src="/shared/images/earth.png" width="300" border="0" alt=""></div>
<br>
<h4 id="theSyntax">Syntax { transform: rotateY( 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="-90">-90
<option value="-75">-75
<option value="-60">-60
<option value="-45">-45
<option value="-30">-30
<option value="0" selected>0
<option value="30">30
<option value="45">45
<option value="60">60
<option value="75">75
<option value="90">90
</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>