Context - I found a codepen of a Book design. The codepen can only open the book cover and show page-1. I wanted to check if I can turn the page and show subsequent page (page-2, page-3). I was able to turn page, but the turned page is getting covered by book cover. In developer tools, I changed the z-index of turned page to be higher than book cover but no change.
Please see the codepen link - http://codepen.io/tusharsaurabh/pen/wgRzdg
Expectation - When I turn page, the turned page should not get concealed by cover.
Below is the code snippet -
$(function(){
var book = $('#book');
$('#view-cover').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
book.removeClass().addClass('view-cover');
});
$('#view-back').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
book.removeClass().addClass('view-back');
});
$('#open-book').click(function(){
if ( book.attr('class') !='open-book') {
$(this).addClass('cur').siblings().removeClass('cur');
book.removeClass().addClass('open-book');
}else{
$(this).removeClass('cur');
$('#view-cover').addClass('cur');
book.removeClass().addClass('view-cover');
}
});
$('#view-rotate').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
book.removeClass().addClass('view-rotate');
});
$('#page-turn').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
$('#book-page-turn').addClass('page-turn');
$('#book-page-turn').css('z-index','20');
});
});
.book-font {
width: 420px;
height: 560px;
position: absolute;
top: 0;
bottom: 0;
font-size: 15px;
text-align: center;
text-shadow: 0 2px 0 rgba(30, 35, 45, 1);
box-shadow: inset 3px 0 10px rgba(0, 0, 0, 0.1);
z-index: 10;
-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-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-ms-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-transform: translate3d(0, 0, 25px);
-moz-transform: translate3d(0, 0, 25px);
-ms-transform: translate3d(0, 0, 25px);
-o-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
}
.book-page {
width: 415px;
height: 550px;
line-height: 20px;
position: absolute;
top: 5px;
z-index: 9;
box-shadow: inset 3px 0 10px rgba(0, 0, 0, 0.1);
-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-duration: .5s;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 24px);
-moz-transform: translate3d(0, 0, 24px);
-ms-transform: translate3d(0, 0, 24px);
-o-transform: translate3d(0, 0, 24px);
transform: translate3d(0, 0, 24px);
}
.page {
height: 500px;
margin: 30px 40px;
overflow: hidden;
}
.book-page h3 {
font-size: 14px;
text-align: center;
margin-bottom: 14px;
}
.book-page p {
font-size: 13px;
margin-bottom: 14px;
}
.page-turn {
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-ms-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: rotate3d(0, 1, 0, -160deg);
-moz-transform: rotate3d(0, 1, 0, -160deg);
-ms-transform: rotate3d(0, 1, 0, -160deg);
-o-transform: rotate3d(0, 1, 0, -160deg);
transform: rotate3d(0, 1, 0, -160deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="book" class="view-cover">
<div class="main">
<div class="book-font">
<div class="book-cover">
<h1 class="title">Wuthering Heights</h1>
<h2 class="author">Emily Bronte</h2>
<div class="publisher">Oxford University Press, USA</div>
</div>
<div class="book-cover-back"></div>
</div>
<div class="book-page" id='book-page-turn'>
<div id="page-1" class="page">
<h3>1 Mr Lockwood visits Wuthering Heights</h3>
.......more code
</div>
</div>
</div>
</body>
</html>
I don't think the z-index is the problem. The page is not displaying due to the transform and backface-visibility styles on .page-turn
Remove these:
/*-webkit-transform: rotate3d(0, 1, 0, -160deg);
-moz-transform: rotate3d(0, 1, 0, -160deg);
-ms-transform: rotate3d(0, 1, 0, -160deg);
-o-transform: rotate3d(0, 1, 0, -160deg);
transform: rotate3d(0, 1, 0, -160deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;*/
And then run the code:
CODEPEN
I'm not sure what transition effects or styling you want, but maybe this will help you get started..
Related
This jsFiddle is taken from what I am building, on jsFiddle it works without issue. The function flips the card - no problem. However, when running it on my local host the card sometimes (often the first time a card is flipped but then not thereafter) disappears for a few seconds before reappearing. I think this may be related to the fact that there is an image on the front of the card, as this does not disappear. Is there any bug visible in my code, or is there a work around for problems like this perhaps?
The CSS is extensive but I wanted to copy it in exactly as is in case the source of the problem lies therein.
$(function() {
$('.card-container').on("click", function() {
$(this).find('.card').toggleClass("flipped");
});
});
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 290px;
color: grey;
text-align: center;
font-weight: bold;
font-size: 24px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
border-radius: 2px;
background: url(../../public/images/card.png) no-repeat;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.card .back {
border-radius: 2px;
background: url(../../public/images/card.png) no-repeat;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.reviewflag {
max-height: 35px;
padding-top: 1px;
padding-bottom: 1px;
position: fixed;
margin-left: 48%;
margin-top: 20px;
opacity: 0.7;
left: 0;
display: inline-block;
}
.carddissappears {
display: none;
}
.language {
margin-left: 80%;
}
.cardword {
font-size: 20px;
margin-top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-container">
<div class="card">
<div class="front" style="background-color: blue;">
<img class="reviewflag" src="https://cdn.countryflags.com/thumbs/spain/flag-button-round-250.png">
<p class="cardword">Hola</p>
</div>
<div class="back">
<p class="cardword">Bonjour</p>
</div>
</div>
</div>
I'm having issues with two navigation bars in mobile. When I click on the first navigation bar icon, both navigation is coming out. I'm trying the CSS visibility: none code upon clicking the icon but I'm not getting the right outcome. Can you please help me?
I have attached images below for your reference.
This is the two navigation bars. One in black, one in white.
This is the where I'm getting the issue. As you can see both are coming out.
This is what happens when we click on navigation bar 2. This is correct.
Thank you.
Remove Visibility option from here:
.td-js-loaded .td-menu-background, .td-js-loaded #td-mobile-nav {
/* visibility: visible; ----- remove this */
-webkit-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
-moz-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
-o-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
}
Add Visibility to :
.td-menu-mob-open-menu #td-mobile-nav {
height: auto;
overflow: auto;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
left: 0;
visibility: visible; /* it's added here */
}
And in:
.td-menu-mob-open-menu .td-menu-background {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
visibility: visible; /* it's added here */
}
It will solved your current issue.
but you have to do two more think, so that if user open 2nd nav and scroll he can see only navigation menu until, he/she don't close this.
.td-menu-background {
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: absolute; /* before it was position: fixed; */
display: block;
width: 100%;
height: 113%;
z-index: 9999;
visibility: hidden;
transform: translate3d(-100%, 0, 0);
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
}
And for showing cross button on white background, you should change the color of it:
.td-mobile-close .td-icon-close-mobile {
height: 70px;
width: 70px;
line-height: 70px;
font-size: 21px;
color: #bdbdbd; /* before it was "color: #fff;" if you don't like "color: #bdbdbd;" you can change it with your desire color */
top: 4px;
position: relative;
}
I'm pretty new to css animations but I've got my page looking how I want except for this one glitch. I have a scrolling animation using scrollspy.js and when it hits a certain div images slideinleft or slideinright into the page.
Link here
However when you hit control + mwheel down it doesn't start the anims from outside of the browser window like i would prefer it to. I'm using 1920x1080 res, for reference.
Basically, on page load it looks fine:
But again, when employing the ctrl + mwheel down it becomes this ugly looking page:
I need it to scale.
Any css gurus know what I'm doing wrong?
HTML:
<div class="flex-row panel-row-style panel-row-style-for-4-1 page left-phone has-bg feed active" style="margin-top: 100px; animation-name: slideInLeft;">
<div id="pgc-4-1-0" class="panel-grid-cell panel-grid-cell-empty"></div><div id="pgc-4-1-1" class="panel-grid-cell">
<div id="panel-4-1-1-0" class="so-panel widget widget_sow-image panel-first-child panel-last-child" data-index="2">
<div class="top-img panel-widget-style panel-widget-style-for-4-1-1-0">
<div class="so-widget-sow-image so-widget-sow-image-default-eef982a7180b">
<div class="sow-image-container phone">
<img src="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png" width="400" height="831" srcset="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png 400w, http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2-144x300.png 144w" sizes="(max-width: 400px) 100vw, 400px" class="so-widget-image">
<img class="screen-left layer" src="http://streamlistapp.com/wp-content/uploads/2017/07/purse-inside-screen.png">
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-2" class="panel-grid-cell panel-grid-cell-mobile-last animated" style="visibility: visible; animation-name: undefined;">
<div id="panel-4-1-2-0" class="so-panel widget widget_siteorigin-panels-builder panel-first-child panel-last-child" data-index="3">
<div id="pl-w5973cd6d9c123" class="panel-layout">
<div id="pg-w5973cd6d9c123-0" class="panel-grid panel-no-style">
<div id="pgc-w5973cd6d9c123-0-0" class="panel-grid-cell">
<div id="panel-w5973cd6d9c123-0-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="0">
<div class="link-s front panel-widget-style panel-widget-style-for-w5973cd6d9c123-0-0-0">
<div class="so-widget-sow-editor so-widget-sow-editor-base">
<div class="siteorigin-widget-tinymce textwidget">
<h4>
STREAMING<br>
MARKETPLACE
</h4>
<h3>Streamlist</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-3" class="panel-grid-cell panel-grid-cell-empty"></div>
CSS:
.can-transform3d .active.has-bg:before,
.can-transform3d .active.has-bg:after,
.can-transform3d .past-active.has-bg:before,
.can-transform3d .past-active.has-bg:after {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
/*transform: translate3d(328px, 0, 0);*/
transform: translate3d(0px, 0, 0);
}
.has-bg {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.has-bg:before,
.has-bg:after {
content: '';
position:absolute;
display: block;
opacity: 0;
-webkit-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-moz-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-o-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-ms-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-webkit-transition-delay: .25s; /* Safari */
transition-delay: .25s;
z-index: 1;
visibility: visible;
background-repeat: no-repeat;
background-attachment: scroll;
clear: both;
/*width: 100%;*/
}
.past-active:before,
.past-active:after,
.active:before,
.active:after {
opacity: 1 !important;
}
.page {
height: auto;
width: 100%;
position: relative;
text-align: center;
/*padding-top: 60px;*/
z-index: 1;
}
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:after,
.can-transform3d .left-phone:after {
-webkit-transform: translate3d(150px , 0, 0);
-moz-transform: translate3d(150px , 0, 0);
-o-transform: translate3d(150px , 0, 0);
-ms-transform: translate3d(150px , 0, 0);
/*transform: translate3d(682px , 0, 0);*/
transform: translate3d(150px , 0, 0);
}
.left-phone:before,
.left-phone:after {
margin-left: 0;
/*right: 0;*/
}
.active .phone .screen-left, .active .phone .screen-right,
.past-active .phone .screen-left, .past-active .phone .screen-right {
opacity: 1;
}
.phone .screen-left, .phone .screen-right {
opacity: 0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.phone .screen-left {
position: absolute;
top: 12.06656%;
left: 22.37791%;
/*width: 75.460123%;*/
}
.layer {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.feed:before, .discover:before {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/watch3-transparent-bg-e1500713498530.png);
/*top: -150px;*/
height: 564px;
width: 330px;
/*right: -425px;*/
right: -425px;
/*background-position: right center;*/
}
.feed:after, .discover:after {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/bracelet-e1500713698821.jpeg);
height: 260px;
width: 260px;
bottom: 0;
/*right: 15%;*/
right: -6%;
/*background-position: 70% center;*/
}
Scroll spy functions:
//First phone (left)
$('#pgc-4-1-2').on('scrollSpy:exit',function(){
$('.panel-row-style-for-4-1').removeClass('past-active').removeClass('active');
wow.addBox(this);
}).scrollSpy();
$('#pgc-4-1-2').on('scrollSpy:enter',function(){
$(this).removeClass('animated');
$('.panel-row-style-for-4-1')
.removeClass('past-active')
.addClass('active')
.removeClass('animated')
.css({
'animation-name' : 'slideInLeft'
})
wow.addBox(this);
}).scrollSpy();
I have created a 3d block that I am animating with tweenmax. I know that IE doesn't support transform-style: preserve-3d so you need to move it to the child, but because there are multiple blocks (more than the example) it doesn't really work especially when using the js to tween them.
My question is there a way to preserve the 3d using javascript for Internet Explorer?
http://jsfiddle.net/ktcle/mhca1k10/2/
.box {
display: block;
width: 180px;
height: 60px;
position: relative;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
outline: 1px solid transparent;
}
.box::before,
.box::after,
.box i,
.box i::before,
.box i::after,
.box b {
content: '';
display: block;
position: absolute;
}
.box::before {
background: red;
width: 60px;
height: 60px;
-ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
-webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
}
.box::after {
background: pink;
width: 60px;
height: 60px;
-ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
-webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
}
.box i {
background: green;
width: 180px;
height: 60px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-ms-transform: translate3D(0, 0, 0px);
-webkit-transform: translate3D(0, 0, 0px);
transform: translate3D(0, 0, 0px);
}
.box i::before {
background: purple;
width: 180px;
height: 60px;
-ms-transform: rotate(180deg) translate3D(0, 0, -60px);
-webkit-transform: rotate(180deg) translate3D(0, 0, -60px);
transform: rotate(180deg) translate3D(0, 0, -60px);
}
.box i::after {
background: orange;
width: 180px;
height: 60px;
-ms-transform: rotateX(90deg) translate3D(0px, -30px, -30px);
-webkit-transform: rotateX(90deg) translate3D(0px, -30px, -30px);
transform: rotateX(90deg) translate3D(0px, -30px, -30px);
}
.box b {
background: silver;
width: 180px;
height: 60px;
-ms-transform: rotateX(90deg) translate3D(0px, -30px, 30px);
-webkit-transform: rotateX(90deg) translate3D(0px, -30px, 30px);
transform: rotateX(90deg) translate3D(0px, -30px, 30px);
}
I have chart with flippers. it means front portion(z-index: 2) will be text and back portion will be chart.
if i mouse over the front, then back portion chart will be displayed(working chrome). But the same is not working IE & Firefox.
Please see the attached pic & code snippet, how to solve this?
I appreciate your help.
Thanks.
Flipper.css
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
/*border: 1px solid #ccc;*/
border: none;
height: auto;
width: 100%;
display: inline-block;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
height: auto;
width: 100%;
padding: 0px;
margin: 0px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
align-content: center;
}
.front {
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
border: none;
}
.front .name {
font-size: 2em;
display: inline-block;
font-family: Arial, Verdana, Helvetica, sans-serif;
border-radius: 5px;
height: 100%;
width: 100%;
position: absolute;
-webkit-transform: rotate(-0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
background-color: #cef8ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#cef8ff), to(#7fe0f8));
background-image: -webkit-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -moz-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -ms-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -o-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: linear-gradient(to bottom, #cef8ff, #7fe0f8);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cef8ff, endColorstr=#7fe0f8);
}
<div id="FlipMainId" class="flip-container" runat="server" style="height: 330px">
<div id="Card1" class="flipper" runat="server">
<div id="Card1Front" class="front" runat="server">
<span class="name" style="height: 325px;">
<table id="HCWF_Front" runat="server" border="0" style="text-align: center">
<tr>
<td>
<br />
<asp:Label ID="FrontLabel1" runat="server" Text="FrontLabel1" CssClass="FlipperheaderLabel"></asp:Label>
</td>
</tr>
<tr>
<td style="color: #777777; font-size: 12px; font-weight: normal; font-style: italic">
<asp:Label ID="FrontLabel2" runat="server" Text="FrontLabel2" CssClass=""></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel3" runat="server" Text="FrontLabel3" CssClass="FlipperLine1Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel4" runat="server" Text="FrontLabel4" CssClass="FlipperLine2Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel5" runat="server" Text="FrontLabel5" CssClass="FlipperLine2Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel6" runat="server" Text="FrontLabel6" CssClass="FlipperLine2Label"></asp:Label>
</td>
</tr>
</table>
</span>
</div>
<div id="Card1Back" class="back" runat="server" style="height: 330px">
<table width="100%" border="0" runat="server">
<tr>
<td align="right">
<Buttons...../>
</td>
</tr>
<tr>
<td>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"
Height="300">
</telerik:RadHtmlChart>
</td>
</tr>
</table>
</div>
</div>
</div>
I fixed this issue
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/*border: 1px solid #ccc;*/
height: auto;
width: 100%;
}
/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: Accommodating for IE */
.flip-container, .front, .back {
height: auto;
width: 100%;
margin: 0px;
padding: 0px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-o-transform: rotateY(0deg);
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
transform: rotateY(0deg);
position: absolute;
top: 0;
left: 0;
align-content: center;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
}
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
border: none;
}
.front .name {
font-size: 2em;
display: inline-block;
font-family: helvetica, times, serif;
padding-top: 10px;
border-radius: 5px;
height: 100%;
width: 100%;
position: absolute;
-webkit-transform: rotate(-0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
background-color: #cef8ff;
}