¿Cómo recrear el efecto de origen de perspectiva mediante la transformación de elementos secundarios?
Así que después de luchar con IEfallas yincompatibilidades, Finalmente tengo mi cuboide funcionando correctamente (actualizar: aquí hay un ejemplo de eso). La animación requiere animar todos los lados por separado en lugar de un solo elemento principal, sin embargo, esta parece ser la única forma de hacerlo funcionar en IE.
El uso de un solo cuboide funciona bien, sin embargo, varios cuboides son problemáticos, ya que la perspectiva se aplica a los elementos transformados individuales (que son necesarios para trabajar en IE), todos tienen el mismo aspecto, independientemente de su posición en el escenario:
Si se aplicara una perspectiva al escenario, el punto de fuga se ubicaría en su centro, lo que provocaría que los objetos secundarios se transformaran en consecuencia, y eso es lo que estoy tratando de recrear (¡al mismo tiempo que mantengo la compatibilidad con IE!):
Desafortunadamente, parece que aplicar el origen de perspectiva a los elementos individuales no funciona, así que me pregunto si alguien tiene alguna otra idea de cómo lograr este efecto.
Código para los ejemplos de jsfiddle.Perspectiva sobre elementos individuales:
<!doctype html>
<html>
<head>
<style>
.stage {
width: 800px;
height: 800px;
background: #f6f6f6;
}
.wrapper, .top, .front{
position: absolute;
width: 200px;
height: 200px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.wrapper:nth-child(1) {
z-index: 4;
}
.wrapper:nth-child(2) {
left: 200px;
z-index: 3;
}
.wrapper:nth-child(3) {
left: 400px;
z-index: 2;
}
.wrapper:nth-child(4) {
left: 600px;
z-index: 1;
}
.top {
background-color: #00ff00;
-webkit-transform-origin: 50% 50% -100px;
-moz-transform-origin: 50% 50% -100px;
transform-origin: 50% 50% -100px;
-webkit-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
-moz-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
}
.front {
background-color: #ff0000;
-webkit-transform-origin: 50% 50% -100px;
-moz-transform-origin: 50% 50% -100px;
transform-origin: 50% 50% -100px;
-webkit-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
-moz-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
}
</style>
</head>
<body>
<div class='stage'>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
</div>
</body>
</html>
Perspectiva en el escenario:
<!doctype html>
<html>
<head>
<style>
.stage {
width: 800px;
height: 800px;
background: #f6f6f6;
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
}
.wrapper, .top, .front{
position: absolute;
width: 200px;
height: 200px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.wrapper:nth-child(1) {
z-index: 4;
}
.wrapper:nth-child(2) {
left: 200px;
z-index: 3;
}
.wrapper:nth-child(3) {
left: 400px;
z-index: 2;
}
.wrapper:nth-child(4) {
left: 600px;
z-index: 1;
}
.wrapper {
-webkit-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
-moz-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}
.top {
background-color: #00ff00;
-webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
-moz-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
}
.front {
background-color: #ff0000;
}
</style>
</head>
<body>
<div class='stage'>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
</div>
</body>
</html>