Flip only one DIV and not all of the same class

Flip only one DIV and not all of the same class - javascript

Both the divs that have same class names are flipping if you hover only one. Just the div that hovered should flip and not all that have the same class name. JQuery code needs to be tweaked rest is all good. So only active div needs to be changed and not all classes with the same name.
<div class="card col-lg-2 col-md-2 block1 ">
<div class="content">
<div class="cardFront">
<br>
<h1>Front Content</h1>
</div>
<div class="cardBack">BACK CONTENT</div>
</div>
</div>
<div class="card col-lg-2 col-md-2 block2 ">
<div class="content div2">
<div class="cardFront">
<br>
<h1>Front Content</h1>
</div>
<div class="cardBack">BACK CONTENT</div>
</div>
</div>
CSS:
.card {
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
width:200px;
height:180px;
display:block;
margin: 0 0 20px 28px;
padding: 0 0 20px 0;
text-align: center;
color: white;
}
.card .content {
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/* content backface is visible so that static content still appears */
backface-visibility: visible;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-o-backface-visibility: visible;
-ms-backface-visibility: visible;
position:relative;
width: 100%;
height: 100%;
}
.card.applyflip .content {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.card .content .cardStatic {
/* Half way through the card flip, rotate static content to 0 degrees */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
text-align: center;
top: 0;
left: 0;
height: 0;
width: 100%;
}
.card.applyflip .content .cardStatic {
/* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront {
background-image:url('../images/back10.png');
background-color: #961B1D;
}
.card .content .cardBack {
background-color: #961B1D;
}
.card .content .cardFront, .card .content .cardBack {
/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: visible;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.card .content .cardBack, .card.applyflip .content .cardBack {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront, .card.applyflip .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: hidden;
}
#keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-ms-keyframes donothing { 0% { } 100% { } }
JS:
$('.card').hover(function(){
$('.card').toggleClass('applyflip');
}.bind(this));

Just replace $('.card') by $(this) to get the current element
$('.card').hover(function(){
$(this).toggleClass('applyflip');
});
And you don't need and shouldn't bind(this). jQuery does that for you.

You have to use the "this" in your function to say which one you mean.
$('.card').on("hover", function(){
$(this).toggleClass('applyflip');
});

Related

Div doesn't work when it's added more than once

I am using this code to create a gift box and it works fine when there is only one box.
However, when I add a new gift box next to the current one horizontally, I can see the added one but I am unable to open it. Gift boxes seem to work as intended until a user tries to open the added box/boxes.
How can I fix this?
Thanks for your time!
var to = 'Friend!';
var gift_url = 'https://stackoverflow.com/';
var gift_image_url = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png';
var nametag = document.getElementById("nametag");
var present = document.getElementById("present");
var presentImage = document.getElementById("present-image");
function init() {
var _giftLink,
_giftImg;
if (gift_url) {
_giftLink = document.createElement("a");
_giftLink.href = gift_url;
_giftLink.target = "_blank";
presentImage.appendChild(_giftLink);
}
if (gift_image_url) {
_giftImg = document.createElement("img");
_giftImg.src = gift_image_url;
if (_giftLink) {
_giftLink.appendChild(_giftImg);
} else {
presentImage.appendChild(_giftImg);
}
}
present.addEventListener("click", function(e) {
present.classList.toggle("open");
}, false);
nametag.innerText = to;
}
init();
html,
body {
margin: 0;
}
.above-fold {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
position: relative;
}
.above-fold .info-text {
width: 100%;
display: block;
text-align: center;
margin: 0;
padding: 0;
color: #555;
font-family: 'Avenir';
font-weight: 100;
font-size: 13px;
height: 25px;
align-self: flex-end;
}
.wrap-present {
width: 100%;
display: -webkit-box;
display: flex;
align-self: flex-end;
}
.present-box {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: auto;
-webkit-animation: rotate 11s alternate linear infinite;
animation: rotate 11s alternate linear infinite;
cursor: pointer;
}
.present-box:hover {
-webkit-animation: staticFront 700ms ease forwards;
animation: staticFront 700ms ease forwards;
}
.present-box.open {
/*&>.side.top{
opacity: .2;
}*/
-webkit-animation: zoomIn 1s ease-in forwards;
animation: zoomIn 1s ease-in forwards;
-webkit-transform: rotateX(-103deg) rotateY(-180deg);
transform: rotateX(-103deg) rotateY(-180deg);
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box.open .present {
pointer-events: auto;
visibility: visible;
}
.present-box.open .present .img-wrap {
opacity: 1;
-webkit-transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: transform 600ms 800ms, opacity 800ms 200ms;
transition: transform 600ms 800ms, opacity 800ms 200ms, -webkit-transform 600ms 800ms;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.present-box.open > .side {
opacity: .3;
-webkit-transition: opacity 500ms 600ms;
transition: opacity 500ms 600ms;
}
.present-box.open > .side.back {
opacity: 0.7;
-webkit-transform: translateZ(-101px) rotateY(180deg);
transform: translateZ(-101px) rotateY(180deg);
}
.present-box.open > .side.front {
-webkit-transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: transform 800ms 0s, opacity 500ms 600ms;
transition: transform 800ms 0s, opacity 500ms 600ms, -webkit-transform 800ms 0s;
-webkit-transform: translateZ(100px) rotateY(190deg) translateX(0px);
transform: translateZ(100px) rotateY(190deg) translateX(0px);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0.3;
}
.present-box .present {
position: absolute;
width: 200px;
height: 200px;
z-index: 50;
-webkit-transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
display: -webkit-box;
display: flex;
-webkit-perspective: 600px;
perspective: 600px;
pointer-events: none;
visibility: hidden;
}
.present-box .present > .img-wrap {
width: 200px;
align-self: center;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
opacity: 0;
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
}
.present-box .present > .img-wrap a {
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
position: relative;
display: block;
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.present-box .present > .img-wrap a:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.present-box .present > .img-wrap img {
max-width: 100%;
height: auto;
}
.present-box > .side {
width: 200px;
height: 200px;
position: absolute;
display: block;
background: repeating-linear-gradient(45deg, #cc2000, #cc2000 20px, #ffffff 20px, #ffffff 40px);
top: 0;
left: 0;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box > .side.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.present-box > .side.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.present-box > .side.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
transform-origin: center left;
}
.present-box > .side.top {
-webkit-transform: rotateX(-90deg) translateY(-100px);
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 100px;
perspective: 100px;
text-align: center;
}
.present-box > .side.top .to {
display: inline-block;
font-family: cursive;
position: relative;
padding: 10px 10px 30px 10px;
border: 5px dotted #ff6666;
border-width: 2px;
background: #fff;
margin: auto;
-webkit-transform: translateZ(-2px) translateY(50px);
transform: translateZ(-2px) translateY(50px);
}
.present-box > .side.top .to:after {
content: 'Merry Christmas';
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color: #990000;
}
.present-box > .side.top .to .name {
display: block;
position: absolute;
-webkit-transform: translateY(20px) rotateY(180deg) translateX(10px);
transform: translateY(20px) rotateY(180deg) translateX(10px);
text-align: center;
width: 100%;
font-size: 1.1rem;
color: green;
}
.present-box > .side.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.present-box > .side.front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#-webkit-keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#-webkit-keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
#keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>

Coderman was close, but there is not a singular form of GetElementsByClassName in Javascript.
You need to iterate over all of the instances of the class and add a handler to each of them.
var to = 'Friend!';
var gift_url = 'https://stackoverflow.com/';
var gift_image_url = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png';
var nametag = document.getElementById("nametag");
var present = document.getElementsByClassName("present-box");
var presentImage = document.getElementById("present-image");
function init() {
var _giftLink,
_giftImg;
if (gift_url) {
_giftLink = document.createElement("a");
_giftLink.href = gift_url;
_giftLink.target = "_blank";
presentImage.appendChild(_giftLink);
}
if (gift_image_url) {
_giftImg = document.createElement("img");
_giftImg.src = gift_image_url;
if (_giftLink) {
_giftLink.appendChild(_giftImg);
} else {
presentImage.appendChild(_giftImg);
}
}
for (var i = 0; i < present.length; i++) {
present[i].addEventListener("click", function(e) {
this.classList.toggle("open");
}, false);
}
nametag.innerText = to;
}
init();
html,
body {
margin: 0;
}
.above-fold {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
position: relative;
}
.above-fold .info-text {
width: 100%;
display: block;
text-align: center;
margin: 0;
padding: 0;
color: #555;
font-family: 'Avenir';
font-weight: 100;
font-size: 13px;
height: 25px;
align-self: flex-end;
}
.wrap-present {
width: 100%;
display: -webkit-box;
display: flex;
align-self: flex-end;
}
.present-box {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: auto;
-webkit-animation: rotate 11s alternate linear infinite;
animation: rotate 11s alternate linear infinite;
cursor: pointer;
}
.present-box:hover {
-webkit-animation: staticFront 700ms ease forwards;
animation: staticFront 700ms ease forwards;
}
.present-box.open {
/*&>.side.top{
opacity: .2;
}*/
-webkit-animation: zoomIn 1s ease-in forwards;
animation: zoomIn 1s ease-in forwards;
-webkit-transform: rotateX(-103deg) rotateY(-180deg);
transform: rotateX(-103deg) rotateY(-180deg);
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box.open .present {
pointer-events: auto;
visibility: visible;
}
.present-box.open .present .img-wrap {
opacity: 1;
-webkit-transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: transform 600ms 800ms, opacity 800ms 200ms;
transition: transform 600ms 800ms, opacity 800ms 200ms, -webkit-transform 600ms 800ms;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.present-box.open > .side {
opacity: .3;
-webkit-transition: opacity 500ms 600ms;
transition: opacity 500ms 600ms;
}
.present-box.open > .side.back {
opacity: 0.7;
-webkit-transform: translateZ(-101px) rotateY(180deg);
transform: translateZ(-101px) rotateY(180deg);
}
.present-box.open > .side.front {
-webkit-transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: transform 800ms 0s, opacity 500ms 600ms;
transition: transform 800ms 0s, opacity 500ms 600ms, -webkit-transform 800ms 0s;
-webkit-transform: translateZ(100px) rotateY(190deg) translateX(0px);
transform: translateZ(100px) rotateY(190deg) translateX(0px);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0.3;
}
.present-box .present {
position: absolute;
width: 200px;
height: 200px;
z-index: 50;
-webkit-transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
display: -webkit-box;
display: flex;
-webkit-perspective: 600px;
perspective: 600px;
pointer-events: none;
visibility: hidden;
}
.present-box .present > .img-wrap {
width: 200px;
align-self: center;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
opacity: 0;
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
}
.present-box .present > .img-wrap a {
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
position: relative;
display: block;
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.present-box .present > .img-wrap a:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.present-box .present > .img-wrap img {
max-width: 100%;
height: auto;
}
.present-box > .side {
width: 200px;
height: 200px;
position: absolute;
display: block;
background: repeating-linear-gradient(45deg, #cc2000, #cc2000 20px, #ffffff 20px, #ffffff 40px);
top: 0;
left: 0;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box > .side.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.present-box > .side.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.present-box > .side.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
transform-origin: center left;
}
.present-box > .side.top {
-webkit-transform: rotateX(-90deg) translateY(-100px);
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 100px;
perspective: 100px;
text-align: center;
}
.present-box > .side.top .to {
display: inline-block;
font-family: cursive;
position: relative;
padding: 10px 10px 30px 10px;
border: 5px dotted #ff6666;
border-width: 2px;
background: #fff;
margin: auto;
-webkit-transform: translateZ(-2px) translateY(50px);
transform: translateZ(-2px) translateY(50px);
}
.present-box > .side.top .to:after {
content: 'Merry Christmas';
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color: #990000;
}
.present-box > .side.top .to .name {
display: block;
position: absolute;
-webkit-transform: translateY(20px) rotateY(180deg) translateX(10px);
transform: translateY(20px) rotateY(180deg) translateX(10px);
text-align: center;
width: 100%;
font-size: 1.1rem;
color: green;
}
.present-box > .side.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.present-box > .side.front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#-webkit-keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#-webkit-keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
#keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present2">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>

flipping css 3 + js card , only flipps all together

Hey there i found a nice IE compatible card flip code here, i modified it and it works so far. only issue is that it does flip all cards instead of the selected one. i tried to modify the js code but it somehow doesnt work:
http://codepen.io/HendrikEng/pen/pbOYYp
html:
<div class="c-services__item">
<div class="c-services__item__content">
<div class="c-services__item--front">Front</div>
<div class="c-services__item--back">Back</div>
</div>
</div>
<div class="c-services__item">
<div class="c-services__item__content">
<div class="c-services__item--front">Front</div>
<div class="c-services__item--back">Back</div>
</div>
</div>
js:
$('.c-services__item').hover(function(){$('.c-services__item').toggleClass('applyflip');}.bind(this));
i tried to modify it to :
$(".c-services__item").hover(function(){
$(this).find(".c-services__item").toggleClass("applyflip");}.bind(this));
});
});
but that doesnt work at all
css :
.c-services__item {
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
width: 200px;
height: 337px;
}
.c-services__item .c-services__item__content {
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
// content backface is visible so that static content still appears
backface-visibility: visible;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-o-backface-visibility: visible;
-ms-backface-visibility: visible;
position:relative;
width: 100%;
height: 337px;
}
.c-services__item.applyflip .c-services__item__content {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.c-services__item .c-services__item__content .c-services__item--static {
// Half way through the card flip, rotate static content to 0 degrees
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 337px;
line-height:100px;
}
.c-services__item.applyflip .c-services__item__content .c-services__item--static {
// Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.c-services__item .c-services__item__content .c-services__item--front {
background-color: skyblue;
color: tomato;
}
.c-services__item .c-services__item__content .c-services__item--back {
background-color: tomato;
color: skyblue;
}
.c-services__item .c-services__item__content .c-services__item--front, .c-services__item .c-services__item__content .c-services__item--back {
// Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: visible;
position: absolute;
overflow: hidden;
width: 100%;
height: 337px;
text-align: center;
}
.c-services__item .c-services__item__content .c-services__item--front, .c-services__item.applyflip .c-services__item__content .c-services__item--front {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.c-services__item .c-services__item__content .c-services__item--back, .c-services__item.applyflip .c-services__item__content .c-services__item--back {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.c-services__item .c-services__item__content .c-services__item--front, .c-services__item.applyflip .c-services__item__content .c-services__item--back {
// IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip.
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: visible;
}
.c-services__item.applyflip .c-services__item__content .c-services__item--front, .c-services__item .c-services__item__content .c-services__item--back {
// IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip.
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: hidden;
}
#keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-ms-keyframes donothing { 0% { } 100% { } }

You don't need to use .find().
$(".c-services__item").hover(function(){
$(this).toggleClass("applyflip");

using an onClick event to trigger a CSS3 transition

I am experimenting with css3 transitions and want to introduce an onClick event to trigger the transition instead of the pseudo hover class. The problem I have is that the transition is split onto two elements.
Here is the HTML:
<div class="box"><img src="images/1.jpg" width="300" height="200" alt=""/>
<div class="mask">
<!-- Further content goes here -->
</div>
</div>
And here is the CSS:
.box {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
border: solid 2px #E6171A;
}
.mask {
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background-color: #021288;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0) rotate(-360deg);
-moz-transform: scale(0) rotate(-360deg);
-o-transform: scale(0) rotate(-360deg);
-ms-transform: scale(0) rotate(-360deg);
transform: scale(0) rotate(-360deg);
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.box:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: .4;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
-ms-transition-delay: .4s;
transition-delay: .4s;
}
.box img {
-webkit-transition: all 0.4s ease-in-out 1.3s;
-moz-transition: all 0.4s ease-in-out 1.3s;
-o-transition: all 0.4s ease-in-out 1.3s;
-ms-transition: all 0.4s ease-in-out 1.3s;
transition: all 0.4s ease-in-out 1.3s;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.box:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition-delay: .8s;
-moz-transition-delay: .8s;
-o-transition-delay: .8s;
-ms-transition-delay: .8s;
transition-delay: .8s;
/* the delay goes in the hover(action state) to overide the delay in the original state */
}
So the question is how do I apply the onClick event to a transition that is spread over two elements? Hope someone can help!

Substitute :hover with a class, something like clicked
.box.clicked
Then on click, use addClass to add that the clicked class to .box. That change should trigger the animation originally done by :hover.
Here's an example using toggleClass to add/remove the class on click and change the height of the div.

How do I rotate a image 360 degree around is own axis in JavaScript?

I have tried for two days now to find a way to rotate my image while i input a button. What i want help with is to help me get the code to rotate a image in Javascript called images[0] around its own axis. I know this may look hard but i have tried aswell and I really need help from professionals.

Based upon Xotic750's jsfiddle, here is an example using animation and #keyframes (using -webkit- prefix, modify for other browsers).
CSS
#-webkit-keyframes r {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#r:hover ~ img {
-webkit-animation: r 2s infinite linear;
}
#-webkit-keyframes y {
0% { -webkit-transform: rotateY(0deg); }
100% { -webkit-transform: rotateY(360deg); }
}
#y:hover ~ img {
-webkit-animation: y 2s infinite linear;
}
HTML
<button id="r">R</button>
<button id="y">Y</button>
<br/> <br/>
<img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />

Paul S has provided a much better answer.
Here is an example of rotating an image 90 degrees
CSS
#container {
position: relative;
width: 450px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
#card {
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#container:hover #card, #container.hover_effect #card {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
HMTML
<div id="container">
<div id="card">
<img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />
</div>
</div>
jsfiddle

Flip card effect for non-webkit browsers

So I have been looking for the flip card effect. There are a number of nice examples that work well with webkit browsers. For example:
http://www.ilovecolors.com.ar/wp-content/uploads/css-card-flip-webkit/click.html
But I have found none that works with Internet Explorer/Firefox as well. Do you guys perhaps have an example where a similar flip effect is done?

This seems to fit the bill...
http://lab.smashup.it/flip/
Quote: Flip is compatible with: Firefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8)
Here is another one...
http://dev.jonraasch.com/quickflip/examples/
http://jonraasch.com/blog/quickflip-2-jquery-plugin
There is no "flip" in this one, but perhaps you'll find this helpful in another way...
http://malsup.com/jquery/cycle/browser.html
This one seems powerful, but you'll have to program the flip yourself...
https://github.com/heygrady/transform/wiki

There are -moz prefixes that should let you accomplish what you're trying to do.
See here:
http://css3playground.com/flip-card.php
Try adding -moz variants of all the -webkit magic here:
http://jsfiddle.net/nicooprat/GDdtS/
Or... if you're using Compass (http://compass-style.org) and Sass (sass-lang.com) like me, this works nicely in Chrome, Safari, and FF.
HTML
<div class="flip">
<div class="card">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>

SASS with compass mixins
(http://compass-style.org/reference/compass/css3/transform/)
.flip
position: relative
+perspective(800)
width: 80%
height: 200px
.flip .card.flipped
+transform(rotatex(-180deg))
.flip .card
+transform-style(preserve-3d)
+transition(0.5s)
width: 100%
height: 100%
.flip .card .face
position: absolute
z-index: 2
+backface-visibility(hidden)
width: 100%
height: 100%
.flip .card .front
position: absolute
z-index: 1
.flip .card .back
+transform(rotatex(-180deg))
// Make it at least functional IE
.flip .card.flipped .back
z-index: 0

Check out this blog post from David Walsh: http://davidwalsh.name/css-flip
It has some great code for creating a flip effect that works on multiple browsers.

I also couldn't seem to find a good example of this anywhere, so I spent some way too much time making my own.
This one works on all browsers, does not have that weird 360deg IE flip, and includes provision for static content (that lives on both sides of the card - which I needed to put a 'flip' button at the top right of both sides).
--I tested on latest versions of Chrome, Firefox, Safari, Opera, and IE.
http://jsfiddle.net/Tinclon/2ega7yLt/7/
Edit: Also works with transparent backgrounds: http://jsfiddle.net/Tinclon/2ega7yLt/8/
The css (of course) includes IE hacks, so it's a bit long, but the html is quite straightforward:
<div class="card">
<div class="content">
<div class="cardFront">FRONT CONTENT</div>
<div class="cardBack">BACK CONTENT</div>
<div class="cardStatic">STATIC CONTENT</div>
</div>
</div>
$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));
.card {
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
margin:80px 150px;
width:320px;
height:243px;
vertical-align:top;
position:absolute;
display:block;
font-size:25px;
font-weight:bold;
}
.card .content {
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/* content backface is visible so that static content still appears */
backface-visibility: visible;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-o-backface-visibility: visible;
-ms-backface-visibility: visible;
border: 1px solid grey;
border-radius: 15px;
position:relative;
width: 100%;
height: 100%;
}
.card.applyflip .content {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.card .content .cardStatic {
/* Half way through the card flip, rotate static content to 0 degrees */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
text-align: center;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
line-height:100px;
}
.card.applyflip .content .cardStatic {
/* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront {
background-color: skyblue;
color: tomato;
}
.card .content .cardBack {
background-color: tomato;
color: skyblue;
}
.card .content .cardFront, .card .content .cardBack {
/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: visible;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
line-height:200px;
border-radius: 14px;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.card .content .cardBack, .card.applyflip .content .cardBack {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront, .card.applyflip .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: hidden;
}
#keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-ms-keyframes donothing { 0% { } 100% { } }

I was trying to use this http://blog.guilhemmarty.com/flippy/, you can have a try.

Develop Reference

JavaScript is the programming language of the Web.

Flip only one DIV and not all of the same class - javascript

Just replace $('.card') by $(this) to get the current element $('.card').hover(function(){ $(this).toggleClass('applyflip'); }); And you don't need and shouldn't bind(this). jQuery does that for you.

You have to use the "this" in your function to say which one you mean. $('.card').on("hover", function(){ $(this).toggleClass('applyflip'); });

Related

Div doesn't work when it's added more than once

flipping css 3 + js card , only flipps all together

using an onClick event to trigger a CSS3 transition

How do I rotate a image 360 degree around is own axis in JavaScript?

Flip card effect for non-webkit browsers

Categories

Resources