CSS 3d преобразование перспективы сетки

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

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

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

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

вы можете увидеть, что я имею в виду here on 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>

источник

2013-09-03 Hacktisch

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

Перспектива кажется неправильной. Да, потому что это так. вам нужно указать «сохранить-3d». Если нет, гранж-ребенок отображается над ребенком, а этот - над базовым элементом. Плохая новость заключается в том, что собственность не работает в I.E .; так что если вы установите его, он исправит его в большинстве браузеров, кроме I.E .; Кроме того, поскольку И.Е. использует неподписанный синтаксис, который сделает ваш код не будущим доказательством. Только для демонстративных целей, было бы что:
```
#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; 
} 
```

(Вы увидите, что теперь ДИВ растет excesively, я оставляю его в качестве демонстрационных целей)

Изменения перспективы в меньших размерах. Это потому, что вы не являетесь точкой зрения в теле.если вы установили

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

Это будет исправить это

О анимации ведет себя странным; Я не смог воспроизвести его.

Updated demo

источник

2013-09-07 18:19:01 vals

CSS 3d преобразование перспективы сетки

ответ

Смежные вопросы