css-transforms

I'm trying to build a cube with CSS3 3D Transform.. For this example I have only 2 faces : <section id="header-cube-container"> <div id="header-cube"> <figure></figure> <figure></figure> </div> </section> With every other browser I get a good result, but it's weird with IE 11. I have a good 3D translate and rotate on the green face (1), but the red face (2) perpendicular doesn't display in 3D. It's only the projection of the red face on the green face. You can see the result on this fiddle . PS : I make a rotation of 100deg and not 90 to see the projection of the red face on the green face (if

I need to create button with triangle on one side (like this http://css-tricks.com/triangle-breadcrumbs/ ) with linear vertical gradient and border, and I want to use pure CSS3. It's ok if I need 45deg "triangle", I just write smth like this .button:after { -webkit-transform: rotate(45deg); background: -webkit-linear-gradient(-45deg, #fff, #000); content: ''; width: 2em; height: 2em; display: block; } and hide half of that pseudo-element under .button (so only another half of it is visible, like a triangle). But if I need another angle (e.g. more steep) - I can't make it with standart XY

When we use CSS3 transform: operation1(...) operation2(...) , which one is done first? The first operation done seems to be the one the most on the right. , i.e. here operation2 is done before operation1 . Just to be sure, is it true? Note: I have read one thing and its contrary in some places (answers, articles on the internet), thus the question here. Basj Yes, the first operation done is the one the most on the right., i.e. here operation2 is done before operation1 . Here is the documentation : http://www.w3.org/TR/css-transforms-1/ but I haven't found the paragraph about this yet. Example

I'm having a problem with the back face-visibilty property. It works how I want it to in Safari/Chrome, but for some reason it's not working correctly in Firefox. When the box flips, I get a mirror image of the front face. This bug has been acknowledged by Mozilla . The fix is to add transform: rotateX(0deg) to the front and back objects. Adding backface-visiblity:hidden on the container, as suggested by @yalia, makes the back unresponsive in Chrome, hence that fix should be avoided. Here's a fiddle with the fix. Try putting 'backface-visibility:hidden' both on the object and its container.

I have a inline element (a <span> ) nested in a <h1> tag. I applied a transform property to the h1 ( skew so it looks like a parallelogram). I need to transform the span tag to "unskew" it and its text. But this only seems to work in IE. Here is an example of the HTML and CSS: h1 { background: #f00; padding: .25em .5em; text-align: right; transform: skew(-15deg); } h1 span { color: #fff; transform: skew(15deg); } <h1><span>This is a Title</span></h1> Explanation: A <span> is an inline elements and Transform property doesn't apply on inline elements . List of transformable elements on the CSS