I am trying to achieve the effect of "flip card". in the front, I have an element that has a click event, every time you click on it (.link). In the back there is nothing, but when I pass the cursor where the element with the .link class that is in the front, the click event is executed.
I would like to completely isolate the elements from the front part of the ones in the back part. how can I do it?
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">
<a class="front_button link">
text
</a>
</div>
<div class="card__face card__face--back">
back
</div>
</div>
</div>
.scene {
width: 200px;
height: 300px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
.front_button{
background:yellow;
height:200px;
width:100%;
position:absolute;
bottom:0px;
left:0px;
cursor: pointer;
}
.link{
border:1px solid red;
}
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
var link = document.querySelector('.link');
link.addEventListener( 'click', function() {
alert("link");
});
this is my code:
https://codepen.io/anon/pen/pOWONW
testing code from #Temani user
Remove the pointer events from the link when the card has the class is-flipped.
.card.is-flipped .front_button.link {
pointer-events: none;
}
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
var link = document.querySelector('.link');
link.addEventListener( 'click', function(e) {
e.stopPropagation();
alert("link");
});
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 300px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card.is-flipped .front_button.link {
pointer-events: none;
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
.front_button{
background:yellow;
height:200px;
width:100%;
position:absolute;
bottom:0px;
left:0px;
cursor: pointer;
}
.link{
border:1px solid red;
}
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">
<a class="front_button link">
text
</a>
</div>
<div class="card__face card__face--back">
back
</div>
</div>
</div>
<p>Click card to flip.</p>
You can use the "pointer-events" (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) in your css for the is-flipped class.
.card.is-flipped {
transform: rotateY(180deg);
pointer-events: none;
}
This makes it ignore all mouse events.
Related
Is it possible to trigger this rotate function with a click on a button? with :active it's possible to rotate it by clicking on the box. But you will need to keep the button pressed; is it possible to have some kind of toggle function on :active?
Is there any JavaScript to make a box flip?
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
One approach is as below, with comments in the code to explain what's going on:
// here we use document.querySelector() to retrieve the first <button> element
// in the document; we then use EventTarget.addEventListener() to bind the
// anonymous Arrow function as the event-handler for the 'click' event:
document.querySelector('button').addEventListener('click', (e)=>{
// the Event Object ('e') is passed to the function body, we retrieve
// the element to which the function was bound (Event.currentTarget)
// and from there we use Element.closest() to find the closest '.card-wrap'
// element:
e.currentTarget.closest('.card-wrap')
// from there we use Element.querySelector() to find the first (if any)
// flip-box element within that ancestor:
.querySelector('.flip-box')
// and use the Element.classList API to toggle the 'active' class
// on that 'flip-box' element:
.classList.toggle('active');
});
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner,
/* added another selector, so that the
.flip-box-inner element within
.flip-box.active also rotates (is
rotated): */
.flip-box.active .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box, or click the button, below:</h3>
<!-- creating a wrapper element for each 'card' or 'flip-box' in order
to query the DOM more easily to find the relevant .flip-box from
a clicked <button>: -->
<div class="card-wrap">
<!-- insert a <button> with which the user can interact: -->
<button type="button">Toggle the card</button>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
</div>
JS Fiddle demo.
References:
HTML:
<button>.
JavaScript:
Arrow functions.
document.querySelector().
document.querySelectorAll().
Element.classList.
Element.closest().
Element.querySelector().
Element.querySelectorAll().
Event.
EventTarget.addEventListener().
This can be done without Javascript:
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.check:checked ~ .flip-box .flip-box-inner {
transform: rotateY(180deg);
background-color: black;
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
/* Here is the code I added */
a.click-button {
background: steelblue;
padding: 5px;
border-radius: 5px;
color: white;
margin-bottom: 20px;
display: inline-block;
}
input[type="checkbox" i] {
display: none;
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<!-- add a checkbox -->
<input type="checkbox" class="check" id="checked">
<label class="menu-btn" for="checked">
<a class="click-button">click here</a>
</label>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
As long as you don't care about IE, classList is a well-supported option.
In your CSS file, change the following:
/* old: */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
/* new: */
.toggle .flip-box-inner {
transform: rotateY(180deg);
}
Then create a JavaScript file and add the following to it.
document
.getElementsByClassName('flip-box')[0]
.addEventListener('click', function () {
this.classList.toggle('toggle');
});
Then add the following <script> element to your html file.
<script src="<your JavaScript file name>.js"></script>
Here is the full code snippet:
document
.getElementsByClassName('flip-box')[0]
.addEventListener('click', function () {
this.classList.toggle('toggle');
});
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.toggle .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
Hope this helps.
define a generic .flip class that does a 180deg turn of any element it is assigned to with transform: rotateY(180deg).
add an original state transform: rotateY(0deg) to the class to be flipped (here .flip-box-inner showing the 'front').
Assign a Javascript click event listener to the parent to be clicked (here .flip-box).
have JS toggle the generic .flip class on/off.
UPDATE reply after OP comment
I replaced the snippet Javscript with jQuery syntax doing the same as the initial vanilla Javascript.
/*
jQuery alternative
*/
$('.flip-box').on('click', function() {
$('.flip-box-inner').toggleClass('flip');
});
/* DISABLED ORIGINAL JAVASCRIPT, no jQuery
// Reference to elements concerned
// This can be any parent/child combination
const el1 = document.querySelector(".flip-box"); // parent to be clicked
const el2 = document.querySelector(".flip-box-inner"); // child to be flipped
// Attach listener to parent, toggle child flip
el1.addEventListener('click', () => { el2.classList.toggle('flip') });
*/
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
/* ADDED, original state */
transform: rotateY(0deg);
}
/* CHANGED from '.flip-box:hover .flip-box-inner' to */
.flip { transform: rotateY(180deg) }
/* When toggled 'off' in JS '.flip-box-inner'
will revert back to original state */
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script>
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
I have a website, and I want an element to spin around 360 degrees once when it is clicked. The only way I have heard of to rotate a div element is the CSS transform property. I have tried some different things, like
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
where the notrans class makes the element have a transition time of 0 seconds, and
backward.style.transition = "0s";
backward.style.transform = "rotateZ(0deg)";
backward.style.transition = transtime;
backward.style.transform = "rotateZ(360deg)";
Here is the source code I am using right now:
var backward = document.getElementById("backward");
var Backward = function() {bgm.currentTime -= 10;
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
}
:root {
--color: black;
--hovercolor: white;
--backcolor: white;
--hoverbackcolor: black;
--transtime: 0.5s;
}
#controls {
position: absolute;
left: 0;
top: 45%;
width: 100%;
height: 30%;
font-size: 250%;
border: 1px solid var(--color);
border-radius: 20px;
overflow: hidden;
padding: 0;
background-color: var(--color);
}
.cp {
height: 25%;
width: 0;
overflow: hidden;
background-color: black;
}
.controls {
position: absolute;
top: 0;
width: 25%;
height: 100%;
border: 1px solid var(--color);
background-color: var(--backcolor);
color: var(--color);
line-height: 75%;
transform: rotateZ(0deg);
border-radius: 0;
transition: color var(--transtime), background-color var(--transtime);
text-align: center;
padding: 5%;
}
.controls:hover {
background-color: var(--hoverbackcolor);
color: var(--hovercolor);
}
#pause {
left: 25%;
line-height: 100%;
}
#backward {
left: 0;
line-height: 100%;
}
#autoskip {
right: 0;
}
#forward {
right: 25%;
line-height: 100%;
}
#autoskip {
line-height: 150%;
}
#skipline {
position: absolute;
left: 0;
top: 47.5%;
background-color: red;
height: 5%;
width: 100%;
transform: rotateZ(-45deg);
transition: var(--transtime);
}
<!DOCTYPE html>
<html>
<body>
<div id="controls">
<div id="15" class="cp">
<div id="backward" class="controls"><span class="rot"><span class = "button">↺</span></span>
</div>
</div>
<div id="22" class="cp">
<div id="pause" class="controls"><span class="button">| |</span></span>
</div>
</div>
<div id="33" class="cp">
<div id="forward" class="controls"><span class="rot"><span class = "button">↻</span></span>
</div>
</div>
<div id="44" class="cp">
<div id="autoskip" class="controls"><span class="button">⏩</span>
<div id="skipline"></div>
</div>
</div>
</div>
</body>
</html>
As you can see, the Backward button is not spinning when you press it.
Any help?
FYI: There is a lot of extra stuff in the code snippet, like CSS variables, but those are necessary.
Do you want this behaviour?
var spinner = document.querySelector("#spinner");
document.querySelector("button").onclick = function() {
spinner.style.animationName = "example";
setTimeout(function() {
spinner.style.animationName = "";
}, 4000);
};
#spinner {
width: 100px;
height: 100px;
display: flex;
flex-wrap: wrap;
background-color: red;
border-radius: 50%;
overflow: hidden;
animation-duration: 4s;
position: relative;
justify-content: center;
align-items: center;
}
#spinner div {
width: 50%;
height: 50%;
}
#spinner button {
position: absolute;
cursor: pointer;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
#keyframes example {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
<div id="spinner">
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="yellow"></div>
<button>Spin</button>
</div>
Im trying to slide in a div then move 3 other divs.
I have fiddle showing how I want to do it. But its not 100% correct.
If you check the fiddle you will see it slides in when you press "Press me". But instead of going over the 3 red divs I want it to push them to the side.
Fiddle with code
HTML
<div class="wrapper wrapper-content">
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div id="red">Press Me</div>
<div id="red"></div>
<div id="red"></div>
</div>
</div>
CSS
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:absolute;
height:100%;
z-index:1;
}
.container {
border: 2px solid #73AD21;
width:100px;
}
Script
$(function()
{
$("a#toggle-menu").click(function()
{
$("#effectMenu").animate({width:'toggle'},350);
return false;
});
});
Change the id to a class,toggle a class to the items called left,in the css animate the transition of adding the class using css transitions
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div class="red">Press Me</div>
<div class="red"></div>
<div class="red"></div>
</div>
</div>
$(function() {
$("a#toggle-menu").click(function() {
$("#effectMenu").animate({
width: 'toggle'
}, 350);
$(".red").toggleClass('left');
return false;
});
});
.red {
background-color: red;
height: 50px;
margin-top: 2px;
width: 100px;
position: relative;
transition: all 350ms ease-in-out;
}
#effectMenu {
display: none;
background: grey;
color: #FFF;
width: 30px;
position: absolute;
height: 100%;
z-index: 1;
}
.container {
border: 2px solid #73AD21;
width: 100px;
}
.left {
margin-left:30px;
transition: all 350ms ease-in-out;
}
https://jsfiddle.net/ygmbnwgL/
Using float and relative position instead of absolute one, you can do it :
CSS code :
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
float: left;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:relative;
height:150px;
z-index:1;
float: left;
}
.container {
border: 2px solid #73AD21;
width:150px;
}
See this fiddle
Putting together a simple jquery flip on click and return when mouse leaves the div container. Currently the class addition on click is being applied to all elements instead of only the one clicked.
JSFiddle
$('.flip').click(function(){
$(this).find('.card').addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 200px;
height: 100px;
position: relative;
margin: 20px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 100px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">
<div class="card 1">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
<br>
<div class="card 2">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
You added your click handler to the element <div class="flip">. In your click handler, you find all the child elements of the div that was clicked with class "card" and change them.
What if you register your click handler only on the elements with class card?
$('.flip .card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
You need to add your click handler to the card class instead of the parent <div>; otherwise, this references the parent and will find all .card children.
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
There's a running snippet below where you can see it in action.
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 200px;
height: 100px;
position: relative;
margin: 20px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 100px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">
<div class="card 1">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
<br>
<div class="card 2">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>
Your selectors were at the parent div level, here you go:
http://jsfiddle.net/vrnft584/
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
Bind the click event to the card and not the flip:
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 200px;
height: 100px;
position: relative;
margin: 20px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 100px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">
<div class="card 1">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
<br>
<div class="card 2">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>
it's simple just add the event to the element itself not the parent element
$('.flip .card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
You just need to apply the the class to the clicked card you were applying it to the containing div. There you go:
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
I have a demo website. how can I get the menu hover effect as in the reference website given below. I have fiddled little bit here, but I didn't get the transition when I hover on the menu item
ref site :- click here
hover on the top menu and see the effect. how do I get that effect ?
see the code here till I have done
HTML
<li>
<div class="header-navigation-item-state-wrapper">
<div class="white">
<h4 class="header-white">Collections</h4>
</div>
<div class="black">
<h4 class="header-black">Collections</h4>
</div>
</div>
</li>
CSS
* {
background:yellow
}
li {
list-style:none;
}
.header-black {
background:#000;
color:#fff;
padding:10px;
display:block
}
.black {
display:none;
}
.header-white {
background:#fff;
color:#000;
padding:10px;
display:block
}
JQuery
$(document).ready(function () {
$("li").mouseenter(function () {
$(".white").css('display', 'none');
$(".black").css('display', 'block');
});
$("li").mouseleave(function () {
$(".white").css('display', 'block');
$(".black").css('display', 'none');
});
})
You can use 3d effect following way.
.menu li {
display: inline-block;
}
.menu li a {
color: #fff;
display: block;
text-decoration: none;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.threed {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.threed:hover .box,
.threed:focus .box {
transform: translateZ(-25px) rotateX(90deg);
}
.box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.white {
transform: rotatex(0deg) translatez(25px);
background: white;
color: black;
}
.black {
transform: rotatex(-90deg) translatez(25px);
color: white;
background: black;
}
.white, .black {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 15px 10px;
pointer-events: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="menu">
<li><a href="/" class="threed">
Home
<span class="box">
<span class="white">Home</span>
<span class="black">Home</span>
</span>
</a></li>
</ul>
You can change as per your requirement.
Hope it helps.