z-index is canceled by setting transform(rotate)
Let's walk through what is occurring. To start, note that z-index
on positioned elements and transform
by itself create new "stacking contexts" on elements. Here's what's going on:
Your .test
element has transform
set to something other than none, which gives it its own stacking context.
You then add a .test:after
pseudo-element, which is a child of .test
. This child has z-index: -1
, setting the stack level of .test:after
within the stacking context of .test
Setting z-index: -1
on .test:after
does not place it behind .test
because z-index
only has meaning within a given stacking context.
When you remove -webkit-transform
from .test
it removes its stacking context, causing .test
and .test:after
to share a stacking context (that of <html>
) and making .test:after
go behind .test
. Note that after removing .test
's -webkit-transform
rule you can, once again, give it its own stacking context by setting a new z-index
rule (any value) on .test
(again, because it is positioned)!
So how do we solve your problem?
To get z-index working the way you expect, make sure that .test
and .test:after
share the same stacking context. The problem is that you want .test
rotated with transform, but to do so means creating its own stacking context. Fortunately, placing .test
in a wrapping container and rotating that will still allow its children to share a stacking context while also rotating both.
Here's what you started with: http://jsfiddle.net/fH64Q/
And here's a way you can get around the stacking-contexts and keep
the rotation (note that the shadow gets a bit cut off because of.test
's white background):
.wrapper {
-webkit-transform: rotate(10deg);
}
.test {
width: 150px;
height: 40px;
margin: 30px;
line-height: 40px;
position: relative;
background: white;
}
.test:after {
width: 100px;
height: 35px;
content: "";
position: absolute;
top: 0;
right: 2px;
-webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */
-webkit-transform: rotate(3deg); /* Safari and Chrome */
transform: rotate(3deg);
z-index: -1;
}
<div class="wrapper">
<div class="test">z-index is canceled.</div>
</div>
Strange looking words using webkit transform rotate in chrome
Chrome uses Windows GDI for text drawing on Windows. I'm guessing that to rotate, it will draw the horizontal text to a bitmap in memory and then rotate it and render it to the screen. Could be an issue with preserving the font smoothing or maybe font hinting is being done assuming the horizontal orientation then the transformation is applied; resulting in the pixel distortion. You may also be interested in subpixel rendering.
Here's a blog comparing subpixel rendering in chrome and firefox. This is an older article about Firefox's font rendering.
Related Topics
How to Post Urlencoded Form Data With $Http Without Jquery
How to Invoke a Jsf Managed Bean on a HTML Dom Event Using Native JavaScript
JavaScript Function to Add X Months to a Date
Indexof Method in an Object Array
How to Read and Write into File Using JavaScript
Queryselector and Queryselectorall VS Getelementsbyclassname and Getelementbyid in JavaScript
Leaflet Map Not Displayed Properly Inside Tabbed Panel
Count Down Timer with Circular Progress Bar
Polymer Share Styles Across Elements
Vertical Centering Variable Height Image While Maintaining Max-Width/Height
CSS Transition Doesn't Work with Top, Bottom, Left, Right
Invoke Method in Objective C Code from HTML Code Using Uiwebview
Problem Deploying Rails 3.1 Project to Heroku: Could Not Find a JavaScript Runtime
Difference Between Innertext, Innerhtml and Value
How to Have a Default Option in Angular.Js Select Box
How to Properly Reuse Connection to Mongodb Across Nodejs Application and Modules