تدوير / تحريك الصور عن طريق CSS3 بدون جافا سكريبت!

]]></b:skin>

.opacity  {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out;
-moz-transform: rotate(5deg);  
-o-transform: rotate(5deg);  
-webkit-transform: rotate(5deg);  
-ms-transform: rotate(5deg);  
transform: rotate(5deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;  
}
.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);  
-o-transform: rotate(0deg);  
-webkit-transform: rotate(0deg);  
-ms-transform: rotate(0deg);  
transform: rotate(0deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1.3;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}  

<img src="ضع هنا رابط الصورة" border="0" alt="ضع هنا وصف للصورة"  class="opacity" />