CSS Javascript image trasformation (rotate).
It has been more than 3 years since i've left my "web designer work", but i've recently started again to make web sites and starting again to re-learn or remember the use of css.
Now i have a problem:
.images_home2 {
/*-o-transform:rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);*/
display: block;
background-color: #FFF;
padding: 4px;
height: 200px;
width: 298px;
position: absolute;
top: 280px;
left: 330px;
}As you can see i've commented the 3 lines for the image rotation, all because IE in any version doesn't support this type of code and there is no image rotation saved for the 3 angles code i've seen, but in this case it's of no use to me. I've decided to go with some "Jquery" code, using a plugin for image transformation.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.transform-0.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#img1').transform({rotate: -8});
$('#img2').transform({rotate: 10});
$('#img3').transform({rotate: 20});
});
</script> Now, i don't know much of javascript, i was only playing with this code, the result however is that IE doesn't look at the CSS code no more, and it places the images i've manipulated on the top left of the page, instead of the absolute position i've used in the CSS.
I was just guessing, if it's something i miss or my code is just all wrong? By the way, the page is working as intended on every other browser i've tested (Opera, Chrome, Firefox, Safari).
Thousand thanks in advacnce, and sorry for my terrible English, it's not my mother language.
Alessandro.