- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
August 9, 2013 at 1:59 pm #146290bcintegrity1Participant
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.phpAugust 10, 2013 at 1:07 pm #146353bcintegrity1ParticipantFor 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:)
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.