Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 3d Transform problem in IE9 (go figure)

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #146290
    bcintegrity1
    Participant

    I swear I had this 3d transform working at some point, but now (in IE9), the current code is as good as I can get it…any suggestions?

    Current code:

    .menucontainer{
    position: relative; 
    top: 138px; 
    left: -237px; 
    width: 214px;
    height: 368px;
    border-radius: 10px;
    background: #515151;
    background: linear-gradient(left, #d1d1f2 0%, #515151 45%, #515151 55%, #d1d1f2 100%);
    background: -o-linear-gradient(left, #d1d1f2 0%, #515151 45%, #515151 55%, #d1d1f2 100%);
    background: -moz-linear-gradient(left, #d1d1f2 0%, #515151 45%, #515151 55%, #d1d1f2 100%);
    background: -webkit-linear-gradient(left, #d1d1f2 0%, #515151 45%, #515151 55%, #d1d1f2 100%);
    background: -ms-linear-gradient(left, #d1d1f2 0%, #515151 45%, #515151 55%, #d1d1f2 100%);
    -webkit-perspective: 1700px;
    -moz-perspective: 1700px;
    -ms-perspective: 1700px;
    -o-perspective: 1700px;
    perspective: 1700px; }
    
    .flipper{
    position: absolute;
    width: 100%;
    height: 100%;
    -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: all 1.25s cubic-bezier(0.2, 0, 0.7, 1);
    -moz-transition: all 1.25s cubic-bezier(0.2, -0.4, 0.7, 1.4);
    -ms-transition: all 1.25s cubic-bezier(0.2, -0.4, 0.7, 1.4);
    -o-transition: all 1.25s cubic-bezier(0.2, -0.4, 0.7, 1.4);
    transition: all 1.25s cubic-bezier(0.2, -0.4, 0.7, 1.4);
    }
    
    .front, .back {
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;}
    
    .front{z-index: 2;}
    
    .back{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 1;}
    
    .flipper.top {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);}
    
    .flipper.top .back{
    -ms-backface-visibility: visible;
    z-index: 3;}
    

    Live example:<br />
    http://integritycontractingofva.com/Pest-Control-in-Chesterfield%2C-VA—Midlothian%2C-VA—Chester%2C-VA—Moseley%2C-VA.php

    #146353
    bcintegrity1
    Participant

    For IE9, I had to add z-index to .back, and then backface-visibility and z-index to .flipper.top .back.

    The problem is, the z-index changes before the left menu rotates. I tried adding delay, but it didn’t change anything. Works beautifully in Firefox, Chrome, and Safari. Any help would be greatly appreciated:)

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.