<html>
<head>
<title>Abakada CSS Demo: rotate3d( ) 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: rotate3d( 0, 0, 0, 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 sx = tx.value;
var sy = ty.value;
var sz = tz.value;
var sa = ta.value;
var su = oUnit.value;
cubeBox = document.getElementById ( "cube" );
cubeBox.style.transform="rotate3d( " + sx + ", " + sy + ", " + sz + ", " + sa + su + " )";
txt = "Syntax { transform: rotate3d( " + sx + ", " + sy + ", " + sz + ", " + sa + su + " ) }";
theSyntax.innerText = txt;
}
function reset ( ) {
tx.value = 0;
ty.value = 0;
tz.value = 0;
ta.value = 0;
oUnit.value = "deg";
cubeBox = document.getElementById ( "cube" );
cubeBox.style.transform="rotate3d( 0, 0, 0, 0deg )";
theSyntax.innerText = "Syntax { transform: rotate3d( 0, 0, 0, 0deg ) }";
}
//-->
</script>
</head>
<body>
<div class="header"><h2>Abakada CSS Demo: <b>rotate3d( )</b> Transform</h2></div>
<hr size=1 width=92%>
<center>
<p id="msg">This example illustrates the effects of applying the <b>rotate3d( )</b> function to change an element's position in 3D space.<br>
Note the CSS declaration as you modify the function's parameters.</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: rotate3d( 0, 0, 0, 0deg ) }</h4>
<p><b>Select from these options to modify the image's position.</b></p>
<p>X <input id="tx" name="tx" value=0 size=3>
Y <input id="ty" name="ty" value=0 size=3>
Z <input id="tz" name="tz" value=0 size=3>
Angle <input id="ta" name="ta" value=0 size=3>
Unit:
<select id="oUnit" name="oUnit">
<option value="deg" selected>degrees
<option value="grad">gradians
<option value="rad">radians
<option value="turn">turns
</select></p>
<p><button onclick="chgAngle ( )">Rotate</button> <button onclick="reset ( )">Reset</button></p>
<br>
</main>
<br>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>