<html>
<head>
<title>Abakada CSS Demo: rotateX( ) Transform</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style>
main {
width: 60%; background: linear-gradient(skyblue, palegoldenrod, skyblue);
border-radius: 18px; box-shadow: -8px 8px 8px gray;
}
#cube {
width: 100px; height: 100px;
transform-style: preserve-3d;
transition: transform 1.5s;
transform: rotateX( 0deg );
}
.face {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
position: absolute; backface-visibility: inherit;
font-size: 60px; color: #fff;
}
.front {
background: rgb(90 90 90 / 70%);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 70%);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 70%);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 70%);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 70%);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 70%);
transform: rotateX(-90deg) translateZ(50px);
}
</style>
<script language="JavaScript">
<!--
function chgAngle ( ) {
var sa = oAngle.value;
var su = oUnit.value;
cubeBox = document.getElementById ( "cube" );
cubeBox.style.transform="rotateX( " + sa + su + " )";
txt = "Syntax { transform: rotate( " + sa + su + " )";
theSyntax.innerText = txt;
}
function reset ( ) {
oAngle.value = 0;
oUnit.value = "deg";
cubeBox = document.getElementById ( "cube" );
cubeBox.style.transform="rotateX( 0deg )";
theSyntax.innerText = "Syntax { transform: rotateX( 0deg ) }";
}
//-->
</script>
</head>
<body>
<div class="header"><h2>Abakada CSS Demo: <b>rotateX( )</b> Transform</h2></div>
<hr size=1 width=92%>
<center>
<p id="msg">This example illustrates the effects of applying the <b>rotateX( )</b> function <br>
to change an element's position in relation to its X-axis in 3D space.</p>
<main>
<br>
<section id="cube">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</section>
<br>
<h4 id="theSyntax">Syntax { transform: rotateX( 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="turn">turns
</select></p>
<p><button onclick="reset ( )">Reset</button></p>
<br>
</main>
<br>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>