I work with this tut: https://www.ostraining.com/images/coding/jquery-flip/demo/
It's work perfectly. This code work good, it show 2 image with affect
<div id="flip">
<div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;">
<div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);">
<img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
</div>
<div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;">
<img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
</div>
</div>
<div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;">
<div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);">
<img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
</div>
<div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;">
<img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
</div>
</div>
</div>
Because i'm loading data by json, so, i want to load this effect in loop json load, i want it show 10 image in data with affect, my code:
<div id="flip">
</div>
<script>
$(document).ready(function(){
var url="http://localhost/service/load_data.php";
//load 10 image
$.getJSON(url,function(result){
$.each(result, function(i, field){
var id=field.id;
var img=field.img;
$('#flip').append('<div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;"><div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div> <div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div></div> ');
});
});
});
</script>
It't show image but not work with effect. I think effect run before load json, so it not work. Please help me. Thank you!
You aren't initializing the plugin which you would need to do after you insert the html
Something like
$.getJSON(url, function(result) {
var $flip = $('#flip')
$.each(result, function(i, field) {
var id = field.id;
var img = field.img;
$flip.append('<div id="flip....../div> ');
});
$flip.flip({ /* plugin options here */ })
});
I know nothing about this specific plugin.
It is possible that it also allows you to add images to an existing instance. If so that would be outlined in the documentation
<div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;">
</div>
<script>
$(document).ready(function(){
var url="http://localhost/service/load_data.php";
//load 10 image
$.getJSON(url,function(result){
$.each(result, function(i, field){
var id=field.id;
var img=field.img;
$('#flip-this').append('<div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div> <div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div>');
$("#flip-this").flip({
trigger: 'hover'
});
});
});
});
</script>
Try This, this may be because all function binding is on already loaded element
if you want to load element dynamically you need to bind function to new loaded element also.
Related
I'm looking for information.
Does someone ever heard about this kinda add?
I'm trying programming an add which opening itself when you click on it, but I'm stuck.
I found a solution if you wanna an opening style add like 2 distributed parts but not for 3 or more side, so if it's possible, so someone can help me find out how can I solve this problem?
This is the html file
I tried the 3rd "distribution" but that stucked under the 2nd so I deleted that part of the code.
.cards {
width: 300px;
height: 600px;
margin: auto auto;
}
.card-toggle {
display: none;
}
.card {
display: block;
width: 180px;
height: 180px;
position: relative;
-webkit-perspective: 900;
margin: auto auto;
cursor: pointer;
}
.card:hover .face {
-webkit-transition: all 0.3s ease-out;
margin: auto auto;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transition: all 0.5s ease-out;
-webkit-transform-origin: 0 0;
}
.front {
-webkit-transform: rotateY(0deg);
z-index: auto;
-webkit-backface-visibility: hidden;
}
.inner-left {
-webkit-transform: rotateY(-10deg);
z-index: 2;
}
.inner-left>img {
-webkit-transform: rotateY(180deg);
}
.inner-right {
-webkit-transform: rotateY(0deg);
z-index: 1;
}
.card:hover .front,
.card:hover .inner-left {
-webkit-transform: rotateY(-15deg);
}
.card-toggle:checked+.card .front,
.card-toggle:checked+.card .inner-left {
-webkit-transform: rotateY(-180deg);
}
.card-toggle:checked+.card .inner-right {
-webkit-transform: rotateY(0deg);
}
<div class='cards'>
<input type="checkbox" id="card-toggle" class="card-toggle" value="selected">
<label class='card' for="card-toggle">
<div class='front face'>
Font view of the advertisement.
</div>
<div class="inner-left face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
<div class="inner-right face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
</label>
</div>
This version makes it open more like a book:
.cards {
width: 300px;
height: 600px;
margin: auto auto;
}
.card-toggle {
display: none;
}
.card {
display: block;
width: 180px;
height: 180px;
position: relative;
perspective: 900;
margin: auto auto;
cursor: pointer;
}
.card:hover .face {
transition: all 0.3s ease-out;
margin: auto auto;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transition: all 0.5s ease-out;
-webkit-transform-origin: 0 0;
}
.front {
/*-webkit-transform: rotateY(180deg);*/
z-index: auto;
-webkit-backface-visibility: hidden;
}
.inner-left {
/*-webkit-transform: rotateY(-180deg);*/
z-index: 2;
}
.inner-left>img {
/*-webkit-transform: rotateY(180deg);*/
}
.inner-right {
/*-webkit-transform: rotateY(180deg);*/
z-index: 1;
}
.card:hover .front,
.card:hover .inner-left {
transform: rotateY(180deg);
}
.card-toggle:checked+.card .front,
.card-toggle:checked+.card .inner-left {
transform: rotateY(180deg);
}
.card-toggle:checked+.card .inner-right {
transform: rotateY(-180deg);
}
<div class='cards'>
<input type="checkbox" id="card-toggle" class="card-toggle" value="selected">
<label class='card' for="card-toggle">
<div class='front face'>
Front view of the advertisement.
</div>
<div class="inner-left face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
<div class="inner-right face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
</label>
</div>
I would like to put a decription text over image while hover. What is the best way to do it? Do I need any js or there is a css solution?
Instead of the divs in snippet I have images in the shape of circle. Hovering the img makes it little bigger as in example.
Thanks for help.
.circle{
width: 150px;
height: 150px;
background: yellow;
border-radius: 100%;
text-align:center;
display: inline-block;
transition: all .2s ease-in-out;
}
.circle:hover{
transform: scale(1.1);
}
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
.circle{
width: 150px;
height: 150px;
background: yellow;
border-radius: 100%;
text-align:center;
position: relative;
display: inline-block;
transition: all .2s ease-in-out;
}
.hoverContent {
opacity: 0;
top: 50%;
left: 50%;
position: absolute;
transform: translateY(-50%) translateX(-50%);
transition: all .2s ease-in-out;
}
.circle:hover{
transform: scale(1.1);
}
.circle:hover .hoverContent {
opacity: 1;
}
<div class="circle">
<span class="hoverContent">Hey there 1</span>
</div>
<div class="circle">
<span class="hoverContent">Hey there 2</span>
</div>
<div class="circle">
<span class="hoverContent">Hey there 3</span>
</div>
Using only CSS and HTML attributes.
.circle {
width: 150px;
height: 150px;
text-align: center;
background: yellow;
border-radius: 100%;
position: relative;
display: inline-block;
transition: all .2s ease-in-out;
}
.circle:hover{
transform: scale(1.1);
}
/* NEW CODE */
.circle:after {
content: attr(data-desc);
display: none;
position: absolute;
top: 50%;
background-color: white;
left: 50%;
transform: translate(-50%, -50%);
}
.circle:hover:after {
display: inline-block;
}
<div class="circle" data-desc="Hello"></div>
<div class="circle" data-desc="World"></div>
<div class="circle" data-desc="just wrap the img and it works">
<img width="100%" height="100%" src="http://www.matmasar.wz.cz/kone.png">
</div>
I'm trying to have a collection of cards/divs within a container. When a card/div is clicked, it should flip horizontally and expand to take up the entire space within the container (basically changing the size of the card/div to 100% x 100% when clicked). I'm unsure if this is possible or not, as all of the examples that I've seen out there typically involve the card/div remaining the same size.
Here's the fiddle I tried working with, but I can't get the basic flipping functionality: https://jsfiddle.net/4dazznb5/
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
.cards {
width: 100%;
height: 100%;
background: gray;
padding: 10px;
box-sizing: border-box;
position: relative;
-webkit-perspective: 800;
perspective: 800;
}
.cards .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: white;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.card {
width: 100%;
background: lightgray;
padding: 6px;
margin: 10px 0;
box-sizing: border-box;
cursor: pointer;
position: relative;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:nth-of-type(1) {
margin-top: 0;
}
.card figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card">
<div class="face front">Card 1 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 2 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 3 Front</div>
<div class="face back">Card 3 Back</div>
</div>
</div>
</div>
Since Tambo's backfaces were better (allowing html content), I made this mix with our answers (tested with success on Mozilla and Chrome):
$('.card').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".face" ).addClass( 'off' );
$( this ).children( ".face" ).removeClass( 'off' );
$( this ).parent( ".cards" ).addClass( 'big' );
$( this ).addClass('flipped');
} else {
$( ".face" ).removeClass( 'off' );
$( ".cards" ).removeClass( 'big' );
$( this ).removeClass('flipped');
}
});
body {
height:100vh;
width:100vw;
margin:0px;
}
#container {
position: relative;
background: skyblue;
height:100%;
width:60%;
overflow: hidden;
margin:auto;
}
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
.cards {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
width: 80%;
height: 20%;
position: absolute;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
margin-left: 10%;
margin-right: 10%;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
z-index: 100;
}
.cards .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
.cards .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 2em;
font-family: arial, sans-serif;
text-align: center;
-webkit-transition: all 0.5s; /* Safari */
transition: all 0.5s;
}
.cards .card .front {
position: absolute;
background: tomato;
z-index: 1;
}
.cards .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background: gold;
}
.cards .card .front,
.cards .card .back{
cursor: pointer;
}
.big {
height:100%;
width:100%;
top: 0% !important;
margin-left: 0%;
margin-right: 0%;
z-index:100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class=cards style="top:0px">
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>
<div class=cards style="top:25%">
<div class=card>
<div class="face front">
Card 2 Front
</div>
<div class="face back">
Card 2 Back
</div>
</div>
</div>
<div class=cards style="top:50%">
<div class=card>
<div class="face front">
Card 3 Front
</div>
<div class="face back">
Card 3 Back
</div>
</div>
</div>
<div class=cards style="top:75%">
<div class=card>
<div class="face front">
Card 4 Front
</div>
<div class="face back">
Card 4 Back
</div>
</div>
</div>
</div>
Just add !important to the new 'flipped' class attributes overwrites the old ones. The javascript line $( ".item" ).not( this ).addClass( 'off' ) removes the other cards when one is selected. The absolute position let everything on its place. The active card have a higher z-index to ensures that other cards will not activate the 'mouseleave' trigger. UPDATE: finally working 100% on Mozilla and Chrome. ps: a click opens the card and another click closes it.
$('.item').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".item" ).not( this ).addClass( 'off' );
$( this ).addClass('flipped');
} else {
$( ".item" ).removeClass( 'off' );
$( this ).removeClass('flipped');
}
});
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
}
.cards {
width: 100%;
height: 100%;
background: lavender;
position: relative;
-webkit-perspective: 900px;
perspective: 900px;
}
.flipped {
top: 0% !important;
height: 100% !important;
width: 100% !important;
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
color: rgba(0, 0, 0, 0.0);
z-index:100;
-webkit-transform-style: preserve-3d;
background: tomato;
}
.flipped:after {
content: 'More text on here.';
right: 0px;
bottom: 0px;
position: absolute;
top: 0px;
left: 0px;
color: rgba(0, 0, 0, 1.0);
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
background: gold;
}
.card {
height: 22%;
width: 100%;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
display: block;
position: absolute;
background: tomato;
}
.aaa {
top:0%;
}
.bbb {
top:26%;
}
.ccc {
top:52%;
}
.ddd {
top:78%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card item aaa">
<div class="face front">Some text on here.</div>
</div>
<div class="card item bbb">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ccc">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ddd">
<div class="face front">Some text on here.</div>
</div>
</div>
</div>
Just play with Element.classList and CSS transitions
// Function to flip the card and expand the content
function flipMe() {
console.log(this.innerHTML);
var card = this.querySelector('.card');
card.classList.add('flipped');
// this handler will be executed every time the cursor is moved off the card
card.addEventListener("mouseout", function( event ) {
this.classList.remove('flipped');
}, false);
}
// Define our variables
var cardWrapper = document.querySelector('.cardWrapper');
cardWrapper.addEventListener("click", flipMe, false);
:root {
background: #CAC8CC;
}
.cardWrapper {
-webkit-perspective: 800;
-moz-perspective: 800;
perspective: 800;
width: 400px;
height: 300px;
position: relative;
margin: 100px auto;
}
.cardWrapper .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
}
.cardWrapper .card {
width: 100%;
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
}
.cardWrapper .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 4em;
text-align: center;
}
.cardWrapper .card .front {
position: absolute;
background: black;
color: white;
z-index: 1;
}
.cardWrapper .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background-color: #0095ff;
}
.cardWrapper .card .front,
.cardWrapper .card .back{
cursor: pointer;
}
<div class=cardWrapper>
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>
I would turn front and back of a card with this code, but after one click I see the back card and after second click I don't see any card! What is the problem?
$(".carta img").click(function() {
$(this).toggleClass("flipped");
})
.contenitorecarta {
position: relative;
width: 100px;
height: 150px;
perspective: 800px;
}
.carta {
width: 100px;
height: 150px;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.carta img {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.carta.back {
transform: rotateY(180deg)
}
.carta .flipped {
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenitore-carta">
<div class="carta">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
I assume that you are following this tutorial?: http://desandro.github.io/3dtransforms/docs/card-flip.html
Issues
You have four (4) issues:
In your CSS, you should have...
.contenitore-carta instead of .contenitorecarta.
.carta.flipped instead of .carta .flipped
.carta .back instead of .carta.back
In your JavaScript, the following should be changed from...
$(".carta img") to $(".carta").
Also, you need to add the vendor-prefixed style rules so that the transformations can work in all supported browsers. See A List Apart: Prefix or Posthack for a more information on this.
Solution
The code below should work correctly. Note: I translated the class names from Italian to English :)
$(".card").click(function() {
$(this).toggleClass("flipped");
})
.container {
width: 100px;
height: 150px;
position: relative;
border: 1px solid #CCC;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card div {
display: block;
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
I made a few changes to your CSS and JS to achieve the effect you're looking for.
Changed JS so it's adding a class to the parent .carta so both children can be styled based on the change in state
Fixed the "contentitore-carta" selector in CSS — it was missing the hyphen
Instead of using the images for the transforms, I switched these to using the parent .front, .back divs. This isn't make-or-break, but transforms tend to play nicer with divs.
Think that covers it. Updated code below.
$(".carta").click(function() {
$(this).toggleClass("flipped");
})
.contenitore-carta {
position: relative;
width: 100px;
height: 150px;
perspective: 800px;
}
.carta {
width: 100px;
height: 150px;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.carta .front,
.carta .back {
display: block;
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.carta .back {
transform: rotateY(180deg)
}
.carta.flipped {
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenitore-carta">
<div class="carta">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
Same effect you want with just toogle instead rotateY
$(".carta img").click(function() {
$('.front, .back').toggle();
});
.contenitorecarta {
position: relative;
width: 100px;
height: 150px;
perspective: 800px;
}
.carta {
width: 100px;
height: 150px;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.carta img {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.carta .back { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenitore-carta">
<div class="carta">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
Since many right answers were already given, I just propose a solution with simplified markup and less style, tested both on latest Chrome and Firefox
http://codepen.io/anon/pen/rawWdJ
Markup
<div class="card">
<img class="front" src="http://placehold.it/120x150/F44/000.png&text=Front">
<img class="back" src="http://placehold.it/120x150/44F/000.png&text=Back">
</div>
Css
.card {
position: relative;
width: 120px;
transform-style: preserve-3d;
transition: 1s transform;
}
.card img {
backface-visibility: hidden;
position: absolute;
}
.card .back {
transform: rotateY(180deg)
}
.card.flip {
transform: rotateY(180deg)
}
Js
$('.card').on('click', function() {
$(this).toggleClass('flip');
});
Just need a scrolling set of divs, almost like a slide show! yet to find a solution, need a way to make the commented-out div be scroll-able by clicking somewhere on the page or and arrow image? is this possible without a page reload every "slide"? want it to slide into transition on click and able to go back "home"
HTML:
<div id="wrapper_home">
<div id="tey_home">
<div id="tey_button">
<img src="images/tey_logo-01.png" width="239" height="239" alt="tey_logo" />
</div>
</div>
<!--
<div id="afiw_home">
<div id="home_button"> <img src="images/home.png" width="52" height="52" alt="home" class="withfadeout"/> </div>
<div id="afiw_button">
<img src="images/afiw_logo-01.png" width="460" height="142" class="withfadein2"/>
</div>-->
</div>
</div>
CSS:
.withfadein{
opacity: 0;
-webkit-animation: load 20s linear forwards;
}
#-webkit-keyframes load{
from{opacity: 0;}
to{opacity: 1;}
}
.withfadein2{
opacity: 0;
-webkit-animation: load 10s linear forwards;
}
#-webkit-keyframes load{
from{opacity: 0;}
to{opacity: 1;}
}
.withfadeout {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.withfadeout:hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
#wrapper_index {
height: 686px;
width: 1024px;
background-color: #000;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
background-image: url(images/entry_image-01.png);
background-repeat: no-repeat;
position: relative;
}
#enter_button {
width: 140px;
position: absolute;
left: 434px;
top: 501px;
}
#wrapper_home {
height: 686px;
width: 1024px;
background-color: #000;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
position: relative;
}
#afiw_home {
background-image: url(images/afiw.png);
background-repeat: no-repeat;
height: 686px;
width: 1024px;
position: relative;
}
#afiw_button {
height: 142px;
width: 460px;
position: absolute;
left: 276px;
top: 275px;
}
#home_button {
height: 52px;
width: 52px;
padding-top: 50px;
padding-left: 50px;
}
#tey_home {
background-image: url(images/tey-01.png);
background-repeat: no-repeat;
height: 686px;
width: 1024px;
position: relative;
}
#tey_home #tey_button {
position: absolute;
height: 239px;
width: 239px;
left: 399px;
top: 222px;
}
thank you so much for any help
You should use jquery:
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
This catch a 'click' event, but you can change it as you wish
use the .animate in jquery
var target = $("Target Div")
$("Div to fly").animate({'top': target.offset().top,
'left':target.offset().left}, 1000);