css-transforms

CSS3 animations are not working in IE9. Here is the jfiddle link . Is it possible to make them working on IE or i am making some silly mistake? Here is the code which is not working: @-ms-keyframes rotating { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); } } #rotateMe{ -ms-animation: rotating 5s linear infinite; } As IE doent support this functionality i have created the fallback using jquery rotate plugin here is my fallback function for IE: $(function() { if (!$.support.transition){ var angle = 0; var angle2 = 0; setInterval(function(){ angle+=0.3; angle2-=0.3; $(

Is it possible to create the following shape as a DIV in CSS . The browser support is not important. You cannot skew an element like this directly, you'll need to use two elements (or generated content) and hide certain overflow to make the flat bottom edge: http://jsfiddle.net/6DQUY/1/ #skew { height: 240px; overflow: hidden; } .skew { background: #000; display: inline-block; height: 300px; width: 500px; margin-top: 100px; transform: skew(-8deg, -8deg); } Note: I removed the cross browser definitions for better readability. UPDATE: This would be a more fluid example which resizes in set

I have an element with two classes, one called "rotate" that will rotate the element 360 degrees and another called "doublesize" that will scale the element 2x its normal size: .rotate { transform: rotate(0deg); } .rotate:hover { transform: rotate(360deg); } .doublesize { transform: scale(1); } .doublesize:hover { transform: scale(2); } http://jsfiddle.net/Sbw8W/ I'm guessing this does not work because the classes override each other's transform property? I know that I could easily do this in one CSS rule like: .doublerotatesize { transform: scale(1) rotate(0deg); } .doublerotatesize:hover {

What would be the right way to prefix this CSS in order to cover the widest range of browsers and versions? Version 1: -webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out; transition: transform .3s ease-in-out; -webkit-transform: rotateX(-30deg); -moz-transform: rotateX(-30deg); -ms-transform: rotateX(-30deg); -o-transform: rotateX(-30deg); transform: rotateX(-30deg); Or version 2: -webkit-transition: transform .3s ease-in-out; -moz-transition:

Please check the demo I have two div s the first div is used for showing the scroll-bar and the second div is used for the rotation of inner contents of the div . My question is why scroll-bar is showing even if there is no overflow of the inner contents. Please check the demo and tell me what I am doing wrong here and how to overcome this issue or any alternative way to achieve this. HTML <div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555"> <div id="RotationDiv"> <img style="left: 54px; top: 337px; width: 326px; height: 422px; position:

I'm having a problem with getting the position of a div after rotate filter is applied to it. I have the position of one end, its height, and the angle by which it is rotated, but after checking what this filter actually does on MDN ("[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]") I still don't know how to crack it. Example : The div I'm interested in is the dashed line. Its styling at that moment was : left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad); ( top / left describe the position of its beginning.) I'm trying to get the top / left position