Edited answer: (after comments) “Workaround”, add a transparent outline attribute: outline: 1px solid transparent; Tested on Firefox 10.0.2 Windows 7: http://jsfiddle.net/nKhr8/ Original answer: (background-color dependent) “Workaround”, add a border attribute with the same color of your background (white this case): border: 1px solid white; Tested on Firefox 10.0.2 Windows 7: http://jsfiddle.net/LPEfC/
You are almost good but you have two errors. You need to invert the translations and you need to change the transform-origin of the second one. If you check the documentation, you will see that the reference used to translate the origin is the top left corner of the element and the default value of … Read more
To expand the bottom border on hover, you can use transform:scaleX'(); (mdn reference) and transition it from 0 to 1 on the hover state. Here is an example of what the border hover effect can look like : The border and transition are set on a pseudo element to prevent transitioning the text and avoid … Read more
You can use negative margin for last and first one to hide half the element: .container { display: flex; height: 150px; margin: 0 30px; overflow:hidden; } .box { flex: 1; border: 1px solid; transform: skew(-25deg); position: relative; overflow: hidden; } .box:first-child { margin-left:calc((100% / 5) / -2); } .box:last-child { margin-right:calc((100% / 5) / -2); … Read more
You should make the perspective first in both cases. If you add it at the end the translation will be first made without considering the perspective. If we refer to the specification we can see how the transformation matrix is computed: The transformation matrix is computed from the transform and transform-origin properties as follows: Start … Read more
I was attempting to rotate a simple cog svg graphic around its centre point using a CSS transition. I had the same problem as you with Firefox; transform-origin seemed to have no effect. The solution was to draw the original svg shape so that its centre was at coordinate 0, 0: <svg x=”0px” y=”0px” width=”400px” … Read more
To illustrate how it works let’s consider an animation to show how the scaling effect change the rotation. .red { width:80px; height:20px; background:red; margin:80px; transform-origin:left center; animation: rotate 2s linear infinite; } @keyframes rotate { from{transform:rotate(0)} to{transform:rotate(360deg)} } <div class=”container”> <div class=”red”> </div> </div> As you can see above, the rotation is creating a perfect … Read more
The solution is mentioned here: iPhone WebKit CSS animations cause flicker. For your element, you need to set -webkit-backface-visibility: hidden;
If we refer to the specification we can read: A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in … Read more
Assuming that you want to rotate 90 degrees, this is possible, even for non-text elements – but like many interesting things in CSS, it requires a little cunning. My solution also technically invokes undefined behaviour according to the CSS 2 spec – so while I’ve tested and confirmed that it works in Chrome, Firefox, Safari, … Read more