¿Cuál es la diferencia entre las propiedades de perspectiva de perspectiva y transformación en CSS?
En nuestra aplicación utilizamos una transformación CSS temporal como transición de página.
Con la última versión de Google Chrome (37), esto dejó de funcionar. La transformación ya no tiene perspectiva.
Jugando con las herramientas de desarrollo pude restaurar el comportamiento correcto cambiando la definición de la perspectiva en el elemento padre de
perspective: 2000px;
a
transform: perspective(2000px);
Mi pregunta es: ¿hay algún problema con nuestra declaración existente (usando la propiedad de perspectiva) o es un error en Google Chrome?
Intenté recrear el problema a continuación, pero en el ejemplo reducido veo el efecto inverso, que ahora la perspectiva funciona y se transforma: la perspectiva no.
¿Alguna idea?
.perspective-Parent {
/*-moz-transform: perspective(2000px);
-ms-transform: perspective(2000px);
-o-transform: perspective(2000px);
-webkit-transform: perspective(2000px);
transform: perspective(2000px);*/
-moz-perspective: 2000px;
-ms-perspective: 2000px;
-webkit-perspective: 2000px;
perspective: 2000px;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.page {
background-color: red;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
-o-transform-origin: right center;
-webkit-transform-origin: right center;
transform-origin: right center;
-ms-transform: rotateY(75deg);
-moz-transform: rotateY(75deg);
-o-transform: rotateY(75deg);
-webkit-transform: rotateY(75deg);
transform: rotateY(75deg);
width: 200px;
height: 100px;
}<p>
<div class="perspective-Parent">
<div class="page">
</div>
</div>
Mi comprensión básica de perspectiva versus perspectiva de transformación es simplemente que el atributo de perspectiva simple es lo que normalmente se usa en un elemento principal para darle a varios hijos la misma perspectiva, mientras que la perspectiva de transformación se usaría en un elemento secundario o en un elemento individual para darle su propia perspectiva.
Esto se ve más fácilmente cuando aplica estos efectos a más de un elemento:
perspective: ;en un elemento padre:
.perspective-Parent {
-moz-perspective: 2000px;
-ms-perspective: 2000px;
-webkit-perspective: 2000px;
perspective: 2000px;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.page {
background-color: red;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
-o-transform-origin: right center;
-webkit-transform-origin: right center;
transform-origin: right center;
-ms-transform: rotateY(75deg);
-moz-transform: rotateY(75deg);
-o-transform: rotateY(75deg);
-webkit-transform: rotateY(75deg);
transform: rotateY(75deg);
width: 200px;
height: 100px;
margin: 10px; /* added to make difference more visible */
}<div class="perspective-Parent">
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
</div>Observe que las tres "páginas" del ejemplo anterior se ven desde una perspectiva común.
transform: perspective();sobre los elementos individuales:
.page {
background-color: red;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
-o-transform-origin: right center;
-webkit-transform-origin: right center;
transform-origin: right center;
-ms-transform: perspective(2000px) rotateY(75deg);
-moz-transform: perspective(2000px) rotateY(75deg);
-o-transform: perspective(2000px) rotateY(75deg);
-webkit-transform: perspective(2000px) rotateY(75deg);
transform: perspective(2000px) rotateY(75deg);
width: 200px;
height: 100px;
margin: 10px; /* added to make difference more visible */
}<div class="perspective-Parent">
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
</div>Observe en este ejemplo que las tres "páginas" tienen cada una su propia perspectiva.
Ahora que todo eso está fuera del camino...
Ninguno de los dos enfoques es incorrecto, simplemente ofrecen diferentes efectos visuales, simplemente elige el que prefieras.
La respuesta aceptada aquí no es correcta.
De hecho, puedes realizar una transformación de perspectiva en un elemento principal. Para que esto funcione, necesitas configurar transform-style: preserve-3d; sobre el padre.
.perspective-Parent{
transform: perspective(2000px);
transform-style: preserve-3d;
}
.page {
background-color: red;
transform-origin: right center;
transform: rotateY(75deg);
width: 200px;
height: 100px;
margin: 10px;
}<div class="perspective-Parent">
<div class="page">
</div>
<div class="page">
</div><div class="page">
</div>
</div>Cuando pruebo diferentes perspectivas en Chrome, la propiedad de perspectiva produce algunas distorsiones extrañas.
.box{
width: 100px;
height: 100px;
margin-left: 100px;
}
.no-perspective-box{
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(15deg);
}
.perspective-prop-box{
perspective: 7.5cm;
transform-style: preserve-3d; /*This is required here too*/
transform: rotateX(-15deg) rotateY(15deg);
}
.perspective-box{
transform-style: preserve-3d;
transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
}
.face{
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 100px;
text-align: center;
}
.top{
background-color: blue;
transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.left{
background-color: red;
transform: rotateY(-90deg) translate3d(0, 0, 50px);
}
.front{
background-color: green;
transform: translate3d(0, 0, 50px);
}<p>Without Perspective:</p>
<div class="box no-perspective-box">
<div class="face front">A</div>
<div class="face top">B</div>
<div class="face left">C</div>
</div>
<br /><br />
<p>With Perspective Property:</p>
<div class="box perspective-prop-box">
<div class="face front">A</div>
<div class="face top">B</div>
<div class="face left">C</div>
</div>
<br /><br />
<p>With Perspective Function:</p>
<div class="box perspective-box">
<div class="face front">A</div>
<div class="face top">B</div>
<div class="face left">C</div>
</div>
<br /><br />