Как воссоздать эффект перспективы в перспективе путем преобразования дочерних элементов?
Так что после борьбы с IEглюки а такженесовместимостьЯнаконец-то у меня работает кубоид правильного размера (Обновить: Вот'пример этого). Анимация требует анимации всех сторон отдельно, а не одного родительского элемента, однако это, кажется, единственный способ заставить его работать в IE.
Использование одного кубоида работает нормально, однако несколько кубоидов проблематично, поскольку перспектива применяется к отдельным преобразованным элементам (что необходимо для работы в IE), они все выглядят одинаково, независимо от их положения на сцене:
Если перспектива будет применена к сцене, точка схода будет находиться в ее центре, вызывая соответственно преобразование дочерних объектов, и это 'что япытаюсь воссоздать (при сохранении совместимости IE!):
К сожалению, похоже, что применение перспективы-источника к отдельным элементам нея не работаюИнтересно, есть ли у кого-нибудь еще идеи, как добиться этого эффекта?
Код для примеров jsfiddleПерспектива на отдельные элементы:
.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);
}
Перспектива на сцене:
.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;
}