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
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
Adding a translateZ seems to quick in a more accurate display and solve the issue: -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: translateZ(1px) rotate(45deg); updated fiddle I added the translate in the transform since firefox has been going un-prefixed for 10 versions now.
After combing through the webkit Bugzilla, I found someone who had the same issue and found a workaround. .face.back { background-color: #125672; -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } Becomes: .face.back { background-color: #125672; -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg) translateZ(1px); } The addition of the translateZ to the transform makes the left side of the element clickable. Here … Read more
I don’t think there is any way in CSS to pick and transform each side separately but you can achieve the shape in question by using perspective transforms (pure CSS). Rotating the element with perspective along both X and Y axes sort of produces the effect of each side having a separate transformation. You can … Read more
It’s all a matter of perspective-origin that define how the changes should be visible to us. If you read the same link you will notice this: The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property. Here is some example where you … Read more
IE doesn’t support transform-style: preserve-3d yet. You have to remove the transform from #header-cube and apply it to each of the figure children. Unfortunately IE already uses the non-prefixed properties, so you either can’t use transform-3d at all or have to define the prefixed properties last. From the IE transforms documentation: At this time, Internet … Read more
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
You need to increase the width/height of the image and you may consider flexbox to easily center it. It then overflow equally from the 4 sides and it will cover the gap: .box { margin: 50px; display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 200px; border: 1px solid; border-radius: 20px; overflow: hidden; transform: rotate(45deg); … Read more
Update Nov 2018: Testing the snipet from the question in latest chrome and Firefox works. Although support for 3d transforms on svg elements isn’t very wide, browsers are implementing it more and more. Origin answer : 3D transforms aren’t supported on SVG elements. There are a few workarounds though : If the svg doesn’t contain … Read more