---

---

Klik pada elemen di bawah ini, untuk melihat perbedaan antara transformasi 2D dan 3D transform:

---

Script :

<style script="text/javascript">
#animated_div
{
width:60px;
height:40px;
background:#92B901;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:20px;
padding:10px;
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;

}

@keyframes animated_div
{
0%        {transform: rotate(0deg);left:0px;}
25%        {transform: rotate(20deg);left:0px;}
50%        {transform: rotate(0deg);left:500px;}
55%        {transform: rotate(0deg);left:500px;}
70%        {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100%    {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_div
{
0%        {-webkit-transform: rotate(0deg);left:0px;}
25%        {-webkit-transform: rotate(20deg);left:0px;}
50%        {-webkit-transform: rotate(0deg);left:500px;}
55%        {-webkit-transform: rotate(0deg);left:500px;}
70%        {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100%    {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_div
{
0%   {-moz-transform: rotate(0deg);left:0px;}
25%  {-moz-transform: rotate(20deg);left:0px;}
50%  {-moz-transform: rotate(0deg);left:500px;}
55%  {-moz-transform: rotate(0deg);left:500px;}
70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animated_div
{
0%   {transform: rotate(0deg);left:0px;}
25%  {transform: rotate(20deg);left:0px;}
50%  {transform: rotate(0deg);left:500px;}
55%  {transform: rotate(0deg);left:500px;}
70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}
</style>
<hr>
<div id="animated_div">CSS3<br><span style="font-size:10px;">Animation</span></div>
<hr>

---

<style script="text/javascript">
.animated_div
{
width:60px;
height:40px;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:15px;
padding:10px;
float:left;
margin:20px;
margin-right:50px;
border:1px solid #888888;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

#div1 {background:#92B901;transform:rotate(30deg);-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);-moz-transform:rotate(30deg);}
#div2 {background:#f98450;transform:scale(2,2);-webkit-transform:scale(2,2);-o-transform:scale(2,2);-moz-transform:scale(2,2);}
#div3 {background:#1ec7e6;transform:skew(30deg,20deg);-webkit-transform:skew(30deg,20deg);-o-transform:skew(30deg,20deg);-moz-transform:skew(30deg,20deg);}

#div1 {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844384, M12=-0.5000000000000004, M21=0.5000000000000004, M22=0.8660254037844384, SizingMethod=auto expand)";}
#div2 {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=2, M12=0, M21=0, M22=2, SizingMethod=auto expand)";}
#div3 {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.5773502691896265, M21=0.3639702342662022, M22=1, SizingMethod=auto expand)";}

   
#rotate1, #rotatey1
{
border:1px solid #000000;
background:red;
margin:10px;
opacity:0.7;
}
</style><script>
<!--
var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
x=document.getElementById("rotate1")
clearInterval(rotINT)
rotINT=setInterval("startRotate()",10)
}
function rotateYDIV()
{
y=document.getElementById("rotatey1")
clearInterval(rotYINT)
rotYINT=setInterval("startYRotate()",10)
}
function startRotate()
{
n=n+1
x.style.transform="rotate(" + n + "deg)"
x.style.webkitTransform="rotate(" + n + "deg)"
x.style.OTransform="rotate(" + n + "deg)"
x.style.MozTransform="rotate(" + n + "deg)"
if (n==180 || n==360)
    {
    clearInterval(rotINT)
    if (n==360){n=0}
    }
}
function startYRotate()
{
ny=ny+1
y.style.transform="rotateY(" + ny + "deg)"
y.style.webkitTransform="rotateY(" + ny + "deg)"
y.style.OTransform="rotateY(" + ny + "deg)"
y.style.MozTransform="rotateY(" + ny + "deg)"
if (ny==180 || ny>=360)
    {
    clearInterval(rotYINT)
    if (ny>=360){ny=0}
    }
}
//-->
</script>
        <div style="height:80px;">
            <div style="transform: rotate(360deg);" onclick="rotateDIV()" id="rotate1" class="animated_div">2D rotate</div>
            <div style="transform: rotateY(360deg);" onclick="rotateYDIV()" id="rotatey1" class="animated_div">3D rotate</div>
        </div>
<br>
<hr>

Hal yang terlihat mudah, tapi begitu memusingkan ketika kita ingin mencoba mengerti..