The problem I noticed is that when element scales, browser change its pixels ratio, not pixels amount. Element is smaller but it doesn’t change its actual pixel size in DOM. Because of that I don’t think that CSS-only solution exist. I put scalable element into container which keeps the same pixel ratio as rest of … Read more
I always add : -webkit-backface-visibility: hidden; -webkit-perspective: 1000; When working with 3d transform. Even “fake” 3D transforms. Experience tells me that these two lines always improve performances, especially on iPad but also on Chrome. I did test on your exemple and, as far as I can tell, it works. As for the “why” part of … Read more
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
This is sort of a known behavior with Chrome. Firefox does seem to be able to handle the removal of animation smoothly with transition but Chrome doesn’t do so. I had seen this behavior happen earlier also in this thread. Why does removal of an animation not work with transition in Chrome? While I cannot … Read more
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
Instead of using scale you can consider a translateZ with a perspective. Make sure to define the perspective initially to avoid the bad effect when moving the cursor fast: .scalable{ transition: 0.3s ease-in-out; box-shadow: 0 6px 10px rgba(0,0,0,0.14); transform:perspective(100px); } .scalable:hover { transform:perspective(100px) translateZ(5px); box-shadow: 0 8px 40px rgba(0,0,0,0.25); } .card { width: 100%; background: … Read more
Yes, the first operation done is the one the most on the right., i.e. here operation2 is done before operation1. This MDN article states indeed: The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left. Here is the documentation : http://www.w3.org/TR/css-transforms-1/. … Read more
rotateX(50deg) is equivalent to rotate3d(1, 0, 0, 50deg) rotateY(20deg) is equivalent to rotate3d(0, 1, 0, 20deg) rotateZ(15deg) is equivalent to rotate3d(0, 0, 1, 15deg) So… rotateX(50deg) rotateY(20deg) rotateZ(15deg) is equivalent to rotate3d(1, 0, 0, 50deg) rotate3d(0, 1, 0, 20deg) rotate3d(0, 0, 1, 15deg) For a generic rotate3d(x, y, z, α), you have the matrix where … Read more
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
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.