rotar - transform origin css
z-index se cancela mediante configuración de transformación(rotar) (2)
Usando la propiedad de transformación, el índice Z se cancela y aparece en el frente. (Al comentar -webkit-transform, z-index funciona correctamente en el código siguiente)
.test {
width: 150px;
height: 40px;
margin: 30px;
line-height: 40px;
position: relative;
background: white;
-webkit-transform: rotate(10deg);
}
.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;
}
<html>
<head>
<title>transform</title>
<link rel="stylesheet" type="text/css" href="transformtest.css">
</head>
<body>
<div class="test">z-index is canceled.</div>
</body>
</html>
¿Cómo funcionan el transformador y el z-index juntos?
Estaba enfrentando el problema similar. Lo que hice fue, agregué un envoltorio div alrededor de la prueba y le di la propiedad de transformación al div envoltorio.
.wrapper{
transform: rotate(10deg);
}
aquí está el violín http://jsfiddle.net/KmnF2/16/
Veamos lo que está ocurriendo. Para empezar, tenga en cuenta que z-index en elementos posicionados y transform por sí mismo crear nuevos " contextos de apilamiento " en los elementos. Esto es lo que está pasando:
Su elemento .test tiene una transform establecida en algo distinto de none, lo que le da su propio contexto de apilamiento.
A continuación, agrega un .test:after pseudo-element, que es un elemento secundario de .test . Este elemento secundario tiene z-index: -1 , estableciendo el nivel de pila de .test:after dentro del contexto de apilamiento de .test Configuración de z-index: -1 en .test:after no lo coloca atrás .test porque solo z-index tiene significado dentro de un contexto de apilamiento dado.
Cuando elimina -webkit-transform de .test , elimina su contexto de apilamiento, lo que provoca .test y .test:after de compartir un contexto de apilamiento (el de <html> ) y hacer .test:after ir detrás de .test . Tenga en cuenta que después de eliminar la .test ''s -webkit-transform puede, una vez más, darle su propio contexto de apilamiento estableciendo una nueva regla z-index (cualquier valor) en .test (de nuevo, porque está posicionado).
Entonces, ¿cómo resolvemos tu problema?
Para que el índice Z funcione de la manera .test , asegúrese de que .test y .test:after comparten el mismo contexto de apilamiento. El problema es que quieres que el .test gire con la transformación, pero hacerlo significa crear su propio contexto de apilamiento. Afortunadamente, coloca .test en un contenedor de envoltura y girando, lo que permitirá que sus hijos compartan un contexto de apilamiento al mismo tiempo que rotan ambos.
Esto es lo que comenzó con: http://jsfiddle.net/fH64Q/
Y esta es una forma de evitar los contextos de apilamiento y mantener la rotación (tenga en cuenta que la sombra se corta un poco debido al fondo blanco del
.test):
.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>
Hay otras maneras de hacerlo, mejores formas incluso. Probablemente convertiría el fondo "post-it" en el elemento que lo contiene y luego pondré el texto adentro, ese sería probablemente el método más fácil y reduciría la complejidad de lo que tienes.
Consulte este artículo para obtener más información sobre z-index y el orden de apilamiento, o sobre la especificación de W3C CSS3 en contexto de apilamiento