css-transforms

My background-attachment:fixed is working fine. But when I define CSS3 rotate on that DIV and scroll down then background-attachment:fixed stops working. Check this http://jsfiddle.net/P3jS4/ Right now I am working on chrome18 . When you remove the rotate css then the background-attachment:fixed works fine. http://jsfiddle.net/P3jS4/2 This is not a bug. You're trying to do something the spec hasn't defined yet. It says in the comments: What do fixed backgrounds do in transforms? They should probably ignore the transform completely, since - even transformed - the object should be acting as

I am trying to achieve a CSS only slider. When hover ing left and right arrows, the slider has to slide . Of course. I tried something using animation-play-state , animation-fill-mode (to keep the positions) and animation-direction but I'm not able to fully make it work. Starting with animation-play-state: paused , hover ing the arrows changes it to running . On hover of the right arrow, everything is fine. We can hover, leave, hover again. But, as soon as I hover the left arrow (that changes the animation-direction to reverse ), it's broken. Simplified snippet : .wrapper { overflow: hidden;

When using a css3 transform() , position: fixed does not apply. I made a fully working jsFiddle showing the issue: http://jsfiddle.net/SR5ka/ First scroll down, notice the left-hand sidebar stays fixed. Now, click expand , and scroll down, notice the left-hand sidebar is now not fixed. Any idea if there is a native css fix for this? You could use a work around like this one . It involves toggling a left value (via a class) for both the fixed element and the container. .global-wrapper { position: relative; -webkit-transition: 300ms; transition: 300ms; } .global-wrapper.expanded, .global-wrapper

I have a very complicated site built on CSS3 that has html elements 3d-transformed, rotated, flipped, flopped and just generally distorted. I'm trying to figure out the on-screen location of one of these elements and don't see any way to do so. I was wondering if anyone has any ingenious ideas. Alternatively, if anyone can explain the math behind -webkit-perspective , I can figure out the position as that's the only thing I'm not sure how to model. Have you tried using getBoundingClientRect() ? I've used it successfully in the past to calculate the dimensions of elements that have been

The situation: In my particular case I have 3D photoframe image and a 2D photo. And I want the 2D photo to match the 3D frame using CSS3 transform functions (Rotate, Scale, Skew). The problem: I wasn't able to precisely match the two using manual method aka typing rotation value and watching what it does. Ideal solution #1 Online visual tool exists that lets you drag corners of the photo (like photoshop does) and It gives you the correct CSS3 transform values. Ideal solution #2 Non-visual tool exist - same as before but you manually enter 4 point coordinates (image corners) and it gives you

I am using CSS3 transform on a background image to enlarge on hover. I have tested in the latest browsers of Opera, Safari and Firefox and work nice and smooth, however in Chrome the transition is very jerky. Heres is the link, hover over the social icons to see what I mean.. http://www.media-flare.com/pins/ - I have noticed as you resize the browser down to mobile view, it gets worse. I have done a jsfiddle version here and slowed down the transition as it is harder to see. http://jsfiddle.net/wsgfz/1/ - This seems jerky in chrome and firefox, smooth in safari and opera. Is there anything I

Is it at all possible with current CSS3 to translate an object (specifically a DIV) along an arc or curve? Here's an image to help illustrate. kizu You can use nested elements and make the wrapper and inner element rotate in opposite directions so that the rotation of the inner element compensates for the rotation of the wrapper. If you don't need to keep the nested element horizontal, you can omit the inner rotation. Here is a Dabblet . Stack Snippet: /* Arc movement */ .wrapper { width: 500px; margin: 300px 0 0; transition: all 1s; transform-origin: 50% 50%; } .inner { display: inline-block;

I have a block of a variable height in which I want to put another block with 100% height and vertical text (bottom-to-top direction) and stack it to the left side of the outer block. Is there a way to achieve it with CSS transforms but without width and height calculations in JS? This is what I could get so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <style type="text/css"> .block1 { border: 4px solid #888; height: 120px; width: 200px; } .block2 { height: 100%; border:

When using the transform property in CSS, one of the possible methods is the matrix method that requires 6 input fields. The CSS code would look something like... #test{ transform: matrix(1, 0, 0, 1, 0, 0); } There are also a couple other variations (depending on the browser)... -ms-transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); I know that the values shown above are the stock values for an object, but what do all the numbers mean or do? Birrel The transformation property mentioned above falls in the 2D Transforms category of CSS properties. Along with the