css-transforms

Having a SVG Path: <path class='st8' d='M73.4,11.3c-6.3,0-6.4,3.6-6.4,3.6v18c0,0,0.6,3.3,6.4,3.3c5.8,0,6.6-3.3,6.6-3.3v-18 C80,14.9,79.7,11.3,73.4,11.3z M75,31.3c0,0-0.3,1.2-1.6,1.2c-1.3,0-1.4-1.2-1.4-1.2V16.6c0,0,0.3-1.3,1.5-1.3s1.5,1.3,1.5,1.3V31.3 z'/> I have tried to transform it from CSS instead of declaring the transform attribute from the element tag. This process works fine from webkit and firefox, however when testing on IE9 or 10 nothing happens . <svg> <style> .st8 { -webkit-transform: rotate(45deg); /* works on chrome and Safari */ -moz-transform: rotate(45deg); /* works on firefox

I'm very confused. Why can't I use scale and rotate at the same time? I've tried this, but it does not work: .rotate-img{ -webkit-transform:scale(2,2); -webkit-transform:rotate(90deg); margin-left:20%; margin-top:10%; } I tried jQuery, but does not work neither: <style> .zoom{ -webkit-transform:scale(2,2); margin-left:20%; margin-top:10%; } </style> <script> $(document).ready(function(){ $("img").dblclick(function(){ $(this).addClass("zoom"); $(this).contextmenu(function(){ $(this).css("-webkit-transform","rotate(90deg)"); return false; }) }); }) </script> How could I scale an img and when I

We now all know, particularly from that nice article , that we should prefer css-transforms to animate position. But we got the choice between translate() and translate3d() ... Which one is generally faster? This site below runs tests comparing translate() , translate3d() , and a couple other properties. According to it, translate3d() is faster in most browsers. http://jsperf.com/translate3d-vs-xy The use of translate3d pushes CSS animations into hardware acceleration. Even if you're looking to do a basic 2d translation, use translate3d for more power! So 'T3d' is just better because it tells

I am developing an HTML5 web application for mobile devices and ran into a bit of trouble with smooth animations. Essentially, when a user taps a button, a drawer (a div with height: 0px) should animate to a given height (in pixels) and content will be appended to that drawer. If you have a Pinterest account, you can see the animation as it is now, at http://m.pinterest.com (tap the Comment or Repin button). The unfortunate problem is that on mobile devices, Webkit Transitions aren't hardware-accelerated the height property, so its extremely laggy and the animation is jagged. Here are some

I need to obtain actual height of several different elements (for the sake of precise custom tooltip positioning), and some of these elements (not all) are rotated. $(elem).outerHeight() returns the original height, instead of the actual displayed height. Here's the fiddle with a very simple example: http://jsfiddle.net/NPC42/nhJHE/ I see a possible solution in this answer: https://stackoverflow.com/a/8446228/253974 , but am still hoping there is a simpler way. recursive Dusting off my high school geometry and my formidable graphics skills, I put this diagram together. If you have variables

Consider the following fiddle p { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: transform 1s ease-in; -moz-transition: transform 1s ease-in; -o-transition: transform 1s ease-in; transition: transform 1s ease-in; } a:hover + p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } The transition works smoothly in FF but there is no

I’m trying to wrap my tiny brain around 3D CSS transforms, and I‘m having trouble understanding what the scaleZ() function is for. scale() , scaleX() and scaleY() make sense: they stretch the element along the axis specified, multiplying its dimension along that axis by the number you provide. But scaleZ() seems different: It applies to children of the element It doesn’t affect the dimensions of the child elements, as HTML elements don’t have any dimension along the z-axis (i.e. you can’t make a <div> “thicker”). The WebKit blog says : [ scaleZ() ] affects the scaling along the z axis in

What is the best way to have an object scale and then perform a bounce animation at that scale factor before going back to the original scale factor. I realize I could do something like scaling it to 2.2, then 1.8, then 2.0, but I'm looking for a way where you just have to perform the bounce animation on the scale factor because my scale factor will change. Here is my example. Basically I want to combine the two to work like I said but as you can see the bounce animation performs based off the image size prior to scaling. I need all sides of the image to bounce equally, like the example.

I am trying to create a web layout with trapezoid shapes like in the image attached. With the addition that each section has a background-image that fills the background with cover or a like result. The first section (dark blue) I have achieved simply using skew and two divs as demonstrated below. However, I can't create the following section, where it skews two ways. I have attempted using clip-path without luck. Then the final section needs to square-off again. HTML <section id="my_section"> <div id="my_section_bg"></div> <div id="my_section_content"> <!-- any typical content, text/images