CSS 3D-трансформация перспективы сетки

Попытка создать блочную сетку, которая будет преобразована в 3d под некоторым углом, затем при наведении курсора на один из элементов он поворачивается лицом к пользователю. Посмотрите ниже, чтобы увидеть не очень хорошо работающий пример (только Chrome - он работает и в Safari?).

Так что у меня есть пара проблем с этим, я думаю, что вы тоже можете их заметить, я надеюсь, что они вообще разрешимы;

  • вращение блоков к пользователю не работает хорошо. Перспектива кажется неправильной: в последних рядах это выглядит как движение под другим углом. И мне нужно также сделать шкалу (1,1,9), которая не должна быть необходимой, я думаю, но в противном случае они все получают небольшую высоту.
  • Перспектива меняется при перетаскивании экрана в меньший размер...
  • Наконец, анимация (в моем chrome) не всегда плавная. Иногда это происходит, но в некоторых случаях блок сначала растягивается, а затем вращается сразу

Как это решить? Или кто-то уже делал что-то подобное раньше?

вы можете увидеть, что я имею в виду здесь, на jsfiddle (сделайте экран запуска широким)

CSS:

body{
            -webkit-perspective: 1000;
            background:black;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        #grid{
            margin:auto;
            width:840px;
            -webkit-transform: rotate3d(1,0,0, 70deg);
            margin-top:200px;
        }
        #grid>div{
            -webkit-perspective: 600;
            -moz-perspective: 600;
            perspective: 600;
            color:white;
            font-family:Arial;
            font-size:70px;
            line-height:140px;
            height:140px;
            width:140px;
            float:left;
            text-align:center;
            cursor:pointer;
            position:relative;
        }
        #grid div:hover{
            z-index:500;
        }
        #grid>div:hover div{
            -webkit-transform: rotate3d(1,0,0, -39deg) scale(1,1.9);
            -moz-transform: rotate3d(1,0,0, -39deg) scale(1,1.9);
            transform: rotate3d(1,0,0, -39deg) scale(1,1.9);
        }
        #grid>div>div{
            -webkit-transform-origin:50% 100%;
            width:100%;
            height:100%;
            -webkit-transition:-webkit-transform ease 0.5s;
            -moz-transition:-moz-transform ease 0.5s;
            transition:transform ease 0.5s;
        }
        #grid>div:nth-child(4n)>div{background:red;}
        #grid>div:nth-child(4n+1)>div{background:orange;}
        #grid>div:nth-child(4n+2)>div{background:blue;}
        #grid>div:nth-child(4n+3)>div{background:green;}

        #grid>div:nth-child(6n+1){-webkit-perspective-origin: 300% 100%;-moz-perspective-origin: 300% 100%;}
        #grid>div:nth-child(6n+2){-webkit-perspective-origin: 200% 100%;-moz-perspective-origin: 200% 100%;}
        #grid>div:nth-child(6n+3){-webkit-perspective-origin: 100% 100%;-moz-perspective-origin: 100% 100%;}
        #grid>div:nth-child(6n+4){-webkit-perspective-origin: 0% 100%;-moz-perspective-origin: 0% 100%;}
        #grid>div:nth-child(6n+5){-webkit-perspective-origin: -100% 100%;-moz-perspective-origin: -100% 100%;}
        #grid>div:nth-child(6n+6){-webkit-perspective-origin: -200% 100%;-moz-perspective-origin: -200% 100%;}

HTML:

<div id="grid">
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
</div>
Источник

1 ответ

Решение

О ваших проблемах:

  1. Перспектива кажется неправильной. Да, потому что это так. вам нужно указать "preserve-3d". Если нет, то потомок выводится поверх потомка, а этот - над базовым элементом. Плохая новость в том, что свойство не работает в IE; так что если вы установите его, это будет исправлено в большинстве браузеров, кроме IE; Кроме того, поскольку IE использует нефиксированный синтаксис, это сделает ваш код не пригодным для будущего. Просто для наглядности, это было бы так:

    #grid{
    margin:auto;
    width:840px;
    -webkit-transform: rotate3d(1,0,0, 70deg);
    -webkit-transform-style: preserve-3d; 
    margin-top:200px;
}
#grid>div{
    -webkit-perspective: 600;
    -moz-perspective: 600;
    perspective: 600;
    -webkit-transform-style: preserve-3d;
    color:white;
    font-family:Arial;
    font-size:70px;
    line-height:140px;
    height:140px;
    width:140px;
    float:left;
    text-align:center;
    cursor:pointer;
    position:relative;
}

(Вы увидите, что теперь div очень сильно растет; я оставляю его в демонстрационных целях)

  1. Перспектива меняется в меньших размерах. Это потому, что вы не представляете себе перспективное происхождение в теле. если вы установите

    body { -webkit-перспектива: 1000; -webkit-перспективный источник: 420px 0px;
    фон: черный; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; размер фона: обложка; }

Это исправит это

О анимации, ведущей себя странно; Я не был в состоянии воспроизвести это.

Обновленная демоверсия

Источник
Другие вопросы по тегам