/* 
Document	:	CSS3 Transformers
Created on	:	2011-09-02
Author		:	Sivan
Description	:	CSS3 Transformers by Sivan
Website		:	http://lightcss.com/
URL			:	http://lightcss.com/css3-transformers/
*/
#transformers-container{background:#000;padding:20px;width:550px;margin:20px auto;border:1px solid #666;border-radius:10px;
-moz-box-shadow:0 0 20px #000;
box-shadow:0 0 20px #000;
-webkit-transition:box-shadow .5s ease-in;
-moz-transition:box-shadow .5s ease-in;
-o-transition:box-shadow .5s ease-in;
transition:box-shadow .5s ease-in;
}
#transformers-container:hover{border:1px solid #999;
-moz-box-shadow:0 0 10px #000;
box-shadow:0 0 10px #000;
}
#transformers-content{position:relative;margin:0 auto;width:100px;height:150px;}
#transformers{position:relative;width:70px;height:75px;
-webkit-transition:-webkit-transform 1s ease-in;
-moz-transition:-moz-transform 1s ease-in;
-o-transition:-o-transform 1s ease-in;
transition:transform 1s ease-in;
}
.transformers-parts > div{background-repeat:no-repeat;background-position:0 0;position:absolute;
-webkit-transition:-webkit-transform 1s ease-in;
-moz-transition:-moz-transform 1s ease-in;
-o-transition:-o-transform 1s ease-in;
transition:transform 1s ease-in;
}
#transformers-head{background-image:url(/tutorials/transformers/images/head.png);width:43px;height:22px;top:4px;left:13px;
-webkit-transition:-webkit-transform 1.8s linear;
-moz-transition:-moz-transform 1.8s linear;
-o-transition:-o-transform 1.8s linear;
transition:transform 1.8s 1s linear;
}
#transformers-body{background-image:url(/tutorials/transformers/images/body.png);width:30px;height:46px;top:27px;left:19px;
-webkit-transition:-webkit-transform 2s linear;
-moz-transition:-moz-transform 2s linear;
-o-transition:-o-transform 2s linear;
transition:transform 2s linear;
}
#transformers-la{background-image:url(/tutorials/transformers/images/la.png);width:14px;height:33px;top:34px;left:3px;}
#transformers-ra{background-image:url(/tutorials/transformers/images/ra.png);width:15px;height:33px;top:34px;left:50px;}
#transformers-ll{background-image:url(/tutorials/transformers/images/ll.png);width:28px;height:41px;top:0;left:0;}
#transformers-rl{background-image:url(/tutorials/transformers/images/rl.png);width:29px;height:41px;top:0;left:40px;}
#transformers-container:hover #transformers > div{
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
}
#transformers-container:hover #transformers{
-moz-transform:translate(50px, 20px);
-webkit-transform:translate(50px, 20px);
-o-transform:translate(50px, 20px);
transform:translate(50px, 20px);
}
#transformers-container:hover #transformers-head{
-moz-transform:rotate(-1080deg);
-webkit-transform:rotate(-1080deg);
-o-transform:rotate(-1080deg);
transform:rotate(-1080deg);
}
#transformers-container:hover #transformers-body{
-moz-transform:rotate(1260deg);
-webkit-transform:rotate(1260deg);
-o-transform:rotate(1260deg);
transform:rotate(1260deg);
}
#transformers-container:hover #transformers-la{
-moz-transform:rotate(-205deg) translate(-52px, -16px);
-webkit-transform:rotate(-205deg) translate(-52px, -16px);
-o-transform:rotate(-205deg) translate(-52px, -16px);
transform:rotate(-205deg) translate(-52px, -16px);
}
#transformers-container:hover #transformers-ra{
-moz-transform:rotate(205deg) translate(52px, -16px);
-webkit-transform:rotate(205deg) translate(52px, -16px);
-o-transform:rotate(205deg) translate(52px, -16px);
transform:rotate(205deg) translate(52px, -16px);
}
#transformers-container:hover #transformers-ll{
-moz-transform:rotate(50deg) translate(50px, 38px);
-webkit-transform:rotate(50deg) translate(50px, 38px);
-o-transform:rotate(50deg) translate(50px, 38px);
transform:rotate(50deg) translate(50px, 38px);
}
#transformers-container:hover #transformers-rl{
-moz-transform:rotate(-50deg) translate(-50px, 38px);
-webkit-transform:rotate(-50deg) translate(-50px, 38px);
-o-transform:rotate(-50deg) translate(-50px, 38px);
transform:rotate(-50deg) translate(-50px, 38px);
}