Jump to content
  • 0

transform, transition и IE


maritca
 Share

Question

Добрый день!

Сделала свистоперделки 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;}

 

 
 
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

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

 

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Xandr555
      Добрый день. Размещено 2 блока по 3 изображения, отцентрировано flex, по плану при наведении курсора картинка затемняется, сверху появляется описание. Стили работают как задумано только в Chrome и Opera. В Сафари рамка не всплывает, текст не выравнивается. В IE 11 рамка всплывает, текст не выравнивается. Заранее благодарю.
      <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">По Вашему желанию электропроводку можно уложить в ПВХ-короб</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Красиво, эстетично и надежно - наше кредо!</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Такой вариант электропроводки рекомендуем, например, в подсобных постройках</section></figcaption> </figure> </div> </div> </div> <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">Вмонтированный в стену электросчетчик делает Вашу квартиру более объемной</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Устанавливайте новые светильники, мы поможем подобрать их по мощности</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Мы устанавливаем розетки и выключатели в любой компоновке</section></figcaption> </figure> </div> </div> </div> *, *:after, *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .wrapper{margin:0 auto} .demo-content { text-align: center; } .part{max-height:310px;max-height:100%;display:flex;display:-moz-flex;display: -webkit-flex;justify-content:center} figure.img-box { text-align: center; position: relative; display: inline-block; overflow: hidden; margin: 3px 3px; max-width: 300px; width:100%; background-color:#DCDCDC; -webkit-box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); } figure.img-box * { -webkit-box-sizing: padding-box; box-sizing: padding-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } figure.img-box img { max-width: 100%; vertical-align: top; } figure.img-box figcaption { position:absolute; top:0; bottom:0; left:0; right:0; align-items:center; z-index:1; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; flex-direction:column; -webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; justify-content:center; opacity:0; } figure.img-box:after { border: 8px solid #FF0000; position: absolute; content: ""; display: block; top: 50%; bottom: 50%; left: 0; right: 0; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; opacity: 0; } figure.img-box:hover img { opacity:0.2; } figure.img-box:hover:after { top: 0; bottom: 0; opacity: 0.9; } .img-box .imgone { font-family:'Roboto',sans-serif; color:#00008B; font-size:16px; font-weight: 400; margin: 0; padding:0 10px; transform: scale(0); -webkit-transform:scale(0); -ms-transform:scale(0); -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; } .img-box:hover figcaption, .img-box:hover .imgone { transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); opacity: 1; } скриншоты прилагаю



    • By Govt_sm80
      Привет всем.Не могу поменять размер иконок с сайта https://fontawesome.com/icons/key?style=solid  и не получается сделать такие разделы как на картинке, может кто-то занет как это сделать?      вот ссылка на код    http://jsfiddle.net/kcd86y01/1/     и они еще должны выезжать  анимацией
    • By lokonaft
      Люди добрые, помогите разобраться, весь день пытаюсь понять почему у меня не получается.
      В общем идея была сделать одну красную кнопку, чтобы при наведении появлялось еще 4 зеленых.
      Реализовать попытался 2мя очень похожими способами, через div и через список.
      https://codepen.io/lokonaft/pen/GXqBBP - в данном случае почему то не работает transition
      https://codepen.io/lokonaft/pen/qMNMVL - в данном случае я то ли не могу правильно задать hover, то ли я чего то не понимаю
    • By Боков Глеб
      Компоновка: типичный блок .Wrapper, который имеет ширину 100% от ширины окна, и центровщик (margin: 0 auto;) с указанными min-width и max-width:
      В IE следующий баг: Wrapper почему-то заканчивается раньше, чем надо, а центровщик с содержимым перекрывает следующую такую же компоновку ниже:

      Такой баг был замечен уже практически на свёрстанном лендинге, а потому было очень трудно сделать минимальный работающий пример. Я постарался убрать весь лишний HTML для данного примера, но CSS тоже самое было сделать очень трудно.
      Если Вы запустите пример в IE (ещё раз повторюсь, что в других браузерах всё нормально), то увидите следующее:

      На StackOverflow уже несколько недель никто не может найти решение (оно и понятно: в разметке-то ошибок нет, это просто баг IE, но с ним надо что-то делать, потому что пользователи IE, увы, ещё превышают критическую отметку 10%). Вот только что удалось выяснить: если контейнеру .FlexPageLayoutWithFixedHeaderAndBottomFooter-Wrapper для основного содержимого (под header) задать min-height вместо height, то отображение станет нормальным. К сожалению, такое решение не годится потому, что исчезнет "прилипание" header-а кверху. Можно, конечно, прилепить его и другими способами, но хотелось бы избежать задания его абсолютной высоты, так как это противоречит концепции адаптивной вёрстки.
    • By serzh82saratov
      Всем привет! Я тут новичок, не пинайте сразу если что.
      Требуется аналог position sticky для IE (в режиме совместимости с 7).
      Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.

      То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо.
      Надеюсь более менее объяснил, заранее спасибо.
      Забыл сказать, таких линий на форме 10 - 20 штук.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy