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;
}
Related
At the moment, my navigation bar houses links to sections on the one page and doesn't have any links to other pages. When a link is clicked it automatically goes to the corresponding div on that page however, part of the target div is covered by the navigation bar which remains open until the close button is clicked.
My question is, is there a way to force the header to close once a link has been clicked?
HTML:
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>
CSS:
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
JS:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
});
add this jquery function in your js file :
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
here is snippet for understanding:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
});
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li><a id="learnmore" href="#intro-block">Learn more</a></li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>
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..
I have two different div flip options. But each one is overlapping to another one. how to resolve it.
$(document).ready(function() {
$('.vclick').click(function() {
$(this).closest('.vflipper').toggleClass('vflip');
});
});
$(function() {
$(":checkbox").change(function() {
var arr = $(":checkbox:checked").map(function() {
return $(this).next().html();
}).get();
$("#lbl1").html(arr.join(','));
});
});
$(document).ready(function() {
$('.vclick1').click(function() {
$(this).closest('.vflipper1').toggleClass('vflip1');
});
});
$(function() {
$(":checkbox").change(function() {
var arr = $(":checkbox:checked").map(function() {
return $(this).next().html();
}).get();
$("#lbl2").html(arr.join(','));
});
});
#newTab {
height: 50px;
width: 100%;
position: relative;
}
#model {
height: 50px;
width: 100%;
position: relative;
}
.vfront {
background-color: lightgrey;
}
.vfront1 {
background-color: lightgrey;
}
.vback {
background-color: lightblue;
}
.vback1 {
background-color: lightblue;
}
.vflipper {
position: absolute;
perspective: 600px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.vflipper1 {
position: absolute;
perspective: 600px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.vflipper .vfront,
.vflipper .vback {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-o-transition: transform .6s ease-in-out;
-moz-transition: transform .6s ease-in-out;
-webkit-transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out;
}
.vflipper1 .vfront1,
.vflipper1 .vback1 {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-o-transition: transform .6s ease-in-out;
-moz-transition: transform .6s ease-in-out;
-webkit-transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out;
}
/* vertical flipping stuff */
.vflipper1 {
-webkit-transform-origin: 100% center;
-moz-transform-origin: 100% center;
-ms-transform-origin: 100% center;
transform-origin: 100% center;
}
.vflipper1 .vfront1 {
position: absolute;
top: 0px;
left: 0px;
z-index: 200;
width: inherit;
height: inherit;
}
.vflipper1.vflip1 .vfront1 {
z-index: 900;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vflipper1 .vback1 {
position: absolute;
top: 0px;
left: 0px;
z-index: 800;
width: inherit;
height: 150px;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.vflipper1.vflip1 .vback1 {
z-index: 1000;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.vflipper {
-webkit-transform-origin: 100% center;
-moz-transform-origin: 100% center;
-ms-transform-origin: 100% center;
transform-origin: 100% center;
}
.vflipper .vfront {
position: absolute;
top: 0px;
left: 0px;
z-index: 200;
width: inherit;
height: inherit;
}
.vflipper.vflip .vfront {
z-index: 900;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vflipper .vback {
position: absolute;
top: 0px;
left: 0px;
z-index: 800;
width: inherit;
height: 150px;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.vflipper.vflip .vback {
z-index: 1000;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#lbl {
display: inline;
}
#lb2 {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="newTab" class="vflipper">
<div class="vclick vfront">
<div class="pull-left">Model :</div>
<label id="lbl1"></label>
</div>
<div class="vback ">
<input type="checkbox" class="chk" />
<label>One</label>
<input type="checkbox" class="chk" />
<label>Two</label>
<input type="checkbox" class="chk" />
<label>Three</label>
<input type="checkbox" class="chk" />
<label>Four</label>
<button type="button" class="vclick btn btn-primary">Save</button>
</div>
</div>
<br>
<div id="model" class="vflipper1">
<div class="vclick1 vfront1">
<div class="pull-left">Model :</div>
<label id="lbl2"></label>
</div>
<div class="vback1 ">
<input type="checkbox" class="chk" />
<label>One</label>
<input type="checkbox" class="chk" />
<label>Two</label>
<input type="checkbox" class="chk" />
<label>Three</label>
<input type="checkbox" class="chk" />
<label>Four</label>
<button type="button" class="vclick1 btn btn-primary">Save</button>
</div>
</div>
</body>
</html>
preview :-
After flipped the first div (model)
here the issue is, when i flipped the first Div, it is flipped perfectly but the second div is displaying on top of the flipped first div. but the flipped div should be on top of the second div.
The lower vflipper1 flip is overlapping the top one due to the fact that you positioned the original elements relatively and then positioned the flipped versions absolutely within those. So, since the height of the first unflipped divs are smaller than the flipped versions they will show as overlapped since the flipped starts at the top of the unflipped for second one.
Notice what happens when you adjust the height of #newTab and #model divs to be 150px rather than 50px (the height of the flipped versions). This will get things to line up properly.
$(document).ready(function() {
$('.vclick1').click(function() {
$(this).closest('.vflipper1').toggleClass('vflip1');
});
$(":checkbox").change(function() {
var arr = $(":checkbox:checked").map(function() {
return $(this).next().html();
}).get();
$("#lbl2").html(arr.join(','));
});
$(":checkbox").change(function() {
var arr = $(":checkbox:checked").map(function() {
return $(this).next().html();
}).get();
$("#lbl1").html(arr.join(','));
});
$('.vclick').click(function() {
$(this).closest('.vflipper').toggleClass('vflip');
});
});
#newTab {
height: 150px;
width: 100%;
position: relative;
}
#model {
height: 150px;
width: 100%;
position: relative;
}
.vfront {
background-color: lightgrey;
}
.vfront1 {
background-color: lightgrey;
}
.vback {
background-color: lightblue;
}
.vback1 {
background-color: lightblue;
}
.vflipper {
position: absolute;
perspective: 600px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
height: 150px;
}
.vflipper1 {
position: absolute;
perspective: 600px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.vflipper .vfront,
.vflipper .vback {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-o-transition: transform .6s ease-in-out;
-moz-transition: transform .6s ease-in-out;
-webkit-transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out;
}
.vflipper1 .vfront1,
.vflipper1 .vback1 {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-o-transition: transform .6s ease-in-out;
-moz-transition: transform .6s ease-in-out;
-webkit-transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out;
}
/* vertical flipping stuff */
.vflipper1 {
-webkit-transform-origin: 100% center;
-moz-transform-origin: 100% center;
-ms-transform-origin: 100% center;
transform-origin: 100% center;
}
.vflipper1 .vfront1 {
position: absolute;
top: 0px;
left: 0px;
z-index: 200;
width: inherit;
height: inherit;
}
.vflipper1.vflip1 .vfront1 {
z-index: 900;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vflipper1 .vback1 {
position: absolute;
top: 0;
left: 0;
z-index: 800;
width: inherit;
height: 150px;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.vflipper1.vflip1 .vback1 {
z-index: 1000;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.vflipper {
-webkit-transform-origin: 100% center;
-moz-transform-origin: 100% center;
-ms-transform-origin: 100% center;
transform-origin: 100% center;
}
.vflipper .vfront {
position: absolute;
top: 0px;
left: 0px;
z-index: 200;
width: inherit;
height: inherit;
}
.vflipper.vflip .vfront {
z-index: 900;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vflipper .vback {
position: absolute;
top: 0;
left: 0;
z-index: 800;
width: inherit;
height: 150px;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.vflipper.vflip .vback {
z-index: 1000;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#lbl {
display: inline;
}
#lb2 {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="newTab" class="vflipper">
<div class="vclick vfront">
<div class="pull-left">Model :</div>
<label id="lbl1"></label>
</div>
<div class="vback ">
<input type="checkbox" class="chk" />
<label>One</label>
<input type="checkbox" class="chk" />
<label>Two</label>
<input type="checkbox" class="chk" />
<label>Three</label>
<input type="checkbox" class="chk" />
<label>Four</label>
<button type="button" class="vclick btn btn-primary">Save</button>
</div>
</div>
<br>
<div id="model" class="vflipper1">
<div class="vclick1 vfront1">
<div class="pull-left">Model :</div>
<label id="lbl2"></label>
</div>
<div class="vback1 ">
<input type="checkbox" class="chk" />
<label>One</label>
<input type="checkbox" class="chk" />
<label>Two</label>
<input type="checkbox" class="chk" />
<label>Three</label>
<input type="checkbox" class="chk" />
<label>Four</label>
<button type="button" class="vclick1 btn btn-primary">Save</button>
</div>
</div>
i want to make a button which have jquery function can trigger the css which will flip the card.
i do not know Trigger , toggle or addClass to use. Help thanks !
I actually want it to automatically flip from num 1 to 10.
With looping , how is it going to achieve ?
html
<div class="panel" id="card2">
<div class="front card">
<img src="0.png">
</div>
<div class="back card">
<img src="2.png">
</div>
</div>
css
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .front, .togglefront {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back ,.toggleback{
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
You could use jQuery UI's .switchClass() function to remove and add the specified class. Here is an example:
$("#flip").click(function() {
$(".card").each(function(index) {
if ($(this).hasClass("front")) {
$(this).switchClass("front", "back");
return;
}
if ($(this).hasClass("back")) {
$(this).switchClass("back", "front");
return;
}
});
});
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .front,
.togglefront {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back,
.toggleback {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<button type="button" id="flip">Flip!</button>
<div class="front card">
<img src="http://i.stack.imgur.com/lSjRc.jpg">
</div>
<div class="back card">
<img src="http://i.stack.imgur.com/j5qcg.jpg">
</div>
Or you just use the .removeClass() and .addClass() functions. Here is an example without jQuery UI:
$("#flip").click(function () {
$(".card").each(function (index) {
if ($(this).hasClass("front")) {
$(this).removeClass("front");
$(this).addClass("back");
return;
}
if ($(this).hasClass("back")) {
$(this).removeClass("back");
$(this).addClass("front");
return;
}
});
});
JQUERY
$('.btn').click(function() {
$('.front').addClass('front-flip');
$('.back').addClass('back-flip');
});
You'll need to create a <button> element, and assign an event handler to that button using the code above. Essentially you'll create two new classes front-flip and back-flip which mimic the same CSS that you're currently assigning on hover to flip the card/image over.
See working example here - should set you on the right path EXAMPLE
Example Fiddle
I'm not sure this is the right way to do that, but it's work and you can improve it :
HTML :
<div class="panel panel_1" id="card2">
<div class="front card">
<img src="http://fr.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211813364.png">
</div>
<div class="back card">
<img src="http://fr.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211808744.png">
</div>
</div>
<button id='flip_card'>Flip card</button>
CSS :
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
JS :
//Flip card function
$('#flip_card').click(function(){
var card_id = 'card2';
if($('#'+card_id+' .front').css('z-index')==1)
flip_front(card_id);
else
flip_back(card_id);
});
//Flip back of card
flip_back = function(card_id){
$('#'+card_id+' .front').css({
"z-index": 1, "-webkit-transform": "rotateY(180deg)", "-ms-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)", "transform": "rotateY(180deg)"
});
$('#'+card_id+' .back').css({
"z-index": 2, "-webkit-transform": "rotateY(0deg)", "-ms-transform": "rotateY(0deg)", "-moz-transform": "rotateY(0deg)", "transform": "rotateY(0deg)"
});
}
//Flip front of card
flip_front = function(card_id){
$('#'+card_id+' .back').css({
"z-index": 1, "-webkit-transform": "rotateY(180deg)", "-ms-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)", "transform": "rotateY(180deg)"
});
$('#'+card_id+' .front').css({
"z-index": 2, "-webkit-transform": "rotateY(0deg)", "-ms-transform": "rotateY(0deg)", "-moz-transform": "rotateY(0deg)", "transform": "rotateY(0deg)"
});
}
Hope this helps.
How to make this cube work on IE? I've been stuck here a week and still no success. Here is the `\JSfiddle http://jsfiddle.net/7Lg87gzu/4/
Here is the css code
I don't know what to do here, I've been working for a week right now. Any help must be appreciated.
.cube > div {
position: absolute;
height: 320px;
width: 320px;
padding: 20px;
background-color: rgba(32, 32, 32, 0.85);
font-size: 1em;
line-height: 1em;
color: #fff;
border: 1px solid #202020;
border-radius: 10px;
}
.cube > div:first-child {
-webkit-transform: rotateX(90deg) translateZ(160px);
-moz-transform: rotateX(90deg) translateZ(160px);
transform: rotateX(90deg) translateZ(160px);
-ms-transform:rotateX(90deg) translateZ(160px);
}
.cube > div:nth-child(2) {
-webkit-transform: translateZ(160px);
-moz-transform: translateZ(160px);
transform: translateZ(160px);
}
.cube > div:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(160px);
-moz-transform: rotateY(90deg) translateZ(160px);
transform: rotateY(90deg) translateZ(160px);
text-align: center;
}
.cube > div:nth-child(4) {
-webkit-transform: rotateY(180deg) translateZ(160px);
-moz-transform: rotateY(180deg) translateZ(160px);
transform: rotateY(180deg) translateZ(160px);
}
.cube > div:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(160px);
-moz-transform: rotateY(-90deg) translateZ(160px);
transform: rotateY(-90deg) translateZ(160px);
}
.cube > div:nth-child(5) p {
text-align: center;
font-size: 2.77em;
margin: 40px;
line-height: 60px;
}
.cube > div:nth-child(6) {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(160px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(160px);
transform: rotateX(-90deg) rotate(180deg) translateZ(160px);
}
.cube {
position: relative;
margin: 0 auto 100px;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 50ms linear;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-24deg) rotateY(20deg);
-moz-transition: -moz-transform 50ms linear;
-moz-transform-style: preserve-3d;
-moz-transform: rotateX(-24deg) rotateY(20deg);
transition: transform 50ms linear;
transform-style: preserve-3d;
transform: rotateX(-24deg) rotateY(30deg);
}