transform, transition и IE

[maritca]

Добрый день!

Сделала свистоперделки 3D-вращалки на CSS: http://beton-art.ru/ (три штуки под большой инфографической картинкой).

В IE не работает, даже в в 11-ом... Что ему мешает выводить информацию в тегах <span class="information">?

 

html:

  <div id="container">    <div class="t-wrapper">      <div class="item">        <img src="images/1.png" width="300px" />        <span class="information" >          <strong>ФАСАДНЫЙ ДЕКОР</strong>          <br>Мы выполняем все работы по декорированию дома "под ключ" - от 3D проекта до отделки фасада и монтажа декоративных элементов.<br>При заказе бетонных элементов в нашей студии - дизайн-проект бесплатно!        </span>     </div>   </div> </div>  

css:

.item {    height: 207px;    -webkit-transform-style: preserve-3d;    -moz-transform-style: preserve-3d;    -ms-transform-style: preserve-3d;    -o-transform-style: preserve-3d;    transform-style: preserve-3d;    -webkit-transition: -webkit-transform .6s;    -moz-transition: -moz-transform .6s;    -ms-transition: -ms-transform .6s;    -o-transition: -o-transform .6s;    transition: transform .6s;}  .item:hover {    -webkit-transform: translateZ(-50px) rotateX(90deg);    -moz-transform: translateZ(-50px) rotateX(90deg);    -ms-transform: translateZ(-50px) rotateX(90deg);    -o-transform: translateZ(-50px) rotateX(90deg);    transform: translateZ(-50px) rotateX(90deg);}    .item img {    display: block;    position: absolute;    top: 0;    border-radius: 3px;    box-shadow: 0px 3px 8px rgba(0,0,0,0.3);    -webkit-transform: translateZ(100px);    -moz-transform: translateZ(100px);    -ms-transform: translateZ(100px);    -o-transform: translateZ(100px);    transform: translateZ(100px);    -webkit-transition: all .6s;    -moz-transition: all .6s;    -ms-transition: all .6s;    -o-transition: all .6s;    transition: all .6s;       }    .item .information {    display: block;    position: absolute;    top: 0;    height: 183px;    width: 280px;    text-align: left;    border-radius: 15px;    padding: 10px;    font-size: 12px;    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);    box-shadow: none;    background: rgb(236,241,244);    background: -moz-linear-gradient(top,  rgba(236,241,244,1) 0%, rgba(190,202,217,1) 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,241,244,1)), color-stop(100%,rgba(190,202,217,1)));    background: -webkit-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);    background: -o-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);    background: -ms-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);    background: linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf1f4', endColorstr='#becad9',GradientType=0 );    -webkit-transform: rotateX(-90deg) translateZ(100px);    -moz-transform: rotateX(-90deg) translateZ(100px);    -ms-transform: rotateX(-90deg) translateZ(100px);    -o-transform: rotateX(-90deg) translateZ(100px);    transform: rotateX(-90deg) translateZ(100px);    -webkit-transition: all .6s;    -moz-transition: all .6s;    -ms-transition: all .6s;    -o-transition: all .6s;    transition: all .6s;}

 

 

 

[npofopr]

Да оно и в Хроме себя ужасно ведет. Дергается всё.

[SelenIT]

IE, к сожалению, не поддерживает transform-style: preserve-3d. Вообще. Так что едиственный выход - крутить каждую грань отдельно. Кстати, в данном случае, имхо, можно обойтись и 2d-трансформациями, эффекта перспективы я всё равно ни в одном браузере не наблюдаю...

[Zverushka]

У меня в хроме все плавненько

[maritca]

Да оно и в Хроме себя ужасно ведет. Дергается всё.

Странно, у меня ни в одном хроме ни на одном компе не дёргается... Да и вот Zverushka говорит, что всё пучком в хроме...

IE, к сожалению, не поддерживает transform-style: preserve-3d. Вообще. Так что едиственный выход - крутить каждую грань отдельно. Кстати, в данном случае, имхо, можно обойтись и 2d-трансформациями, эффекта перспективы я всё равно ни в одном браузере не наблюдаю...

 

Спасибо, попробую поковыряться с гранями... Или вообще нафик откажусь от этого решения....

[npofopr]

Конечно плавно, только стоит немного отвести мышку, как начинает дергаться :-)

Вот видео, как у меня это происходит https://dl.dropboxusercontent.com/u/935663/temp/capture-1.avi