css-transforms - w3toppers.com

Make CSS3 triangle with linear gradient

So I know that you want to do this with CSS, but I always do this in SVG: <svg width=”100%” height=”100%” version=”1.1″ xmlns=”http://www.w3.org/2000/svg”> <defs> <linearGradient id=”fill” x1=”0%” y1=”0%” x2=”0%” y2=”100%”> <stop offset=”0%” style=”stop-color:rgb(224,224,224);stop-opacity:1″/> <stop offset=”100%” style=”stop-color:rgb(153,153,153);stop-opacity:1″/> </linearGradient> </defs> <path d=”M 0 0 L 64 0 L 32 64 z” stroke=”colourname” fill=”url(#fill)”/> </svg> You can embed … Read more

Position fixed doesn’t work when using -webkit-transform

The CSS Transforms spec explains this behavior. Elements with transforms act as a containing block for fixed position descendants, so position:fixed under something with a transform no longer has fixed behavior. They do work when applied to the same element; the element will be positioned as fixed, and then transformed.

Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?

I came up against this glitch too and it is definitely a glitch. The workaround is to apply the perspective transform on the child element. I updated your fiddle here: http://jsfiddle.net/jMe2c/ .item { backface-visibility: hidden; transform: perspective(200px) rotateX(0deg); } .container:hover .item { transform: perspective(200px) rotateX(180deg); } (See also answer at https://stackoverflow.com/a/14507332/2105930) I think it is … Read more

CSS3 Transform affecting other elements with chrome/safari

Working solution for flickering elements during transition in Chrome is to set up CSS for parent node: -webkit-backface-visibility: hidden;

5 images symmetrically seperated with diagonal lines

No need to use positioned element, you can simplify like this and use background-position to center the element: .container { display: flex; height: 150px; margin: 0 30px; } .box { flex: 1; border: 1px solid; transform: skew(-25deg); position: relative; overflow: hidden; } .box:after { content: “”; position: absolute; top: 0; bottom: 0; left: -50%; right: … Read more

Flip a 3D card with CSS

I simplified the code to make it shorter and make the 3d card flip on hover. The card flips on the Y axis from the front face to the backface this is what it looks like: This is what I changed for the filp effect: the front face wasn’t rotated on th Y axis on … Read more

CSS3 transform on click using pure CSS

If you want a css only solution you can use active .crossRotate:active { transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } But the transformation will not persist when the activity moves. For that you need javascript (jquery click and css is the cleanest IMO). $( “.crossRotate” ).click(function() { if ( $( this ).css( “transform” ) == … Read more

How to rotate and postion an element on the top left or top right corner?

Change the transform-origin to top left and make the translation -100% body { margin:0; } .credit { transform-origin: top left; position: absolute; background-color: pink; transform: rotate(-90deg) translateX(-100%); } <div class=”credit”> Picture by Name </div> And the other direction: body { margin:0; } .credit { transform-origin: top left; position: absolute; background-color: pink; transform: rotate(90deg) translateY(-100%); } … Read more

Add a transform value to the current transforms that are already on the element?

You could use the += operator to append the rotateX(20deg) to the already existing transformation. el.style.webkitTransform += “rotateX(20deg)”; Note: I have used a different transformation in the below snippet for the visual effect but method is the same. window.onload = function() { var el = document.getElementsByTagName(“div”)[0]; el.style.webkitTransform += “rotateZ(20deg)”; console.log(el.style.webkitTransform); document.getElementById(“changeDeg”).onclick = changeDeg; //event handler … Read more

Backface-Visibility Not Working Properly in Firefox (Works in Safari)

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.