Simple 3D Hover Flip
How do I make an simple 3d hover flip?
GSAP JS and a little jQuery. Works in all browsers that support transformStyle:preserve-3d. IE10 misses out;(. What is a simple 3d hover flip? How do you make a simple 3d hover flip? This script and codes were developed by GreenSock on 11 June 2022, Saturday.
Simple 3D Hover Flip - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple 3D Hover Flip</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cardWrapper"> <div class="card"> <div class="cardFace front"><h1>front</h1></div> <div class="cardFace back"><h1>back</h1></div> </div>
</div>
<div class="cardWrapper"> <div class="card"> <div class="cardFace front"><h1>front</h1></div> <div class="cardFace back"><h1>back</h1></div> </div>
</div>
<div class="cardWrapper"> <div class="card"> <div class="cardFace front"><img src="http://s.cdpn.io/16327/logo_texture.jpg"></div> <div class="cardFace back"><img src="http://s.cdpn.io/16327/logo_robust.jpg"></div> </div>
</div>
<div class="cardWrapper"> <div class="card"> <div class="cardFace front"><h1>front</h1></div> <div class="cardFace back"><h1>back</h1></div> </div>
</div>
<div class="cardWrapper"> <div class="card"> <div class="cardFace front"><h1>front</h1></div> <div class="cardFace back"><div class="moreInfo">This is just an example of how you can customize the content of any card face.</div></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple 3D Hover Flip - Script Codes CSS Codes
body { background-color: black; margin:20px; font-family:Arial, sans-serif;
}
.cardWrapper{ width:200px; height:200px; position:relative; /*background-color:#333;*/ float:left; margin-right:10px; cursor:pointer; -webkit-font-smoothing:antialiased;
}
.cardFace{ position:absolute; width:200px; height:200px; overflow:hidden;
}
.front{ background-color:#333;
}
.back{ background-color:#333;
}
.cardFace h1{ margin:0px; font-size:30px; padding:10px 0px 10px 10px; border-bottom:solid 6px #aaa; border-top:solid 6px #aaa; background-color:black; color:white;
}
.cardFace.back h1{ border-color:#91e600;
}
.moreInfo{ padding:10px; color:white; line-height:24px;
}
Simple 3D Hover Flip - Script Codes JS Codes
//IE doesn't transform-style:preserve-3d.
// for IE try http://codepen.io/rhernando/pen/vjGxH
//using TweenLite.set() takes care of all vendor-prefixes
TweenLite.set(".cardWrapper", {perspective:800});
TweenLite.set(".card", {transformStyle:"preserve-3d"});
TweenLite.set(".back", {rotationY:-180});
TweenLite.set([".back", ".front"], {backfaceVisibility:"hidden"});
$(".cardWrapper").hover( function() { TweenLite.to($(this).find(".card"), 1.2, {rotationY:180, ease:Back.easeOut}); }, function() { TweenLite.to($(this).find(".card"), 1.2, {rotationY:0, ease:Back.easeOut}); }
);
//a nice little intro;)
TweenMax.staggerTo($(".card"), 1, {rotationY:-180, repeat:1, yoyo:true}, 0.1);
/* learn more about GSAP JS:
http://www.greensock.com/gsap-js/
more codepen samples:
http://codepen.io/collection/jmHAn
basics:
http://codepen.io/collection/ifybJ
*/
Developer | GreenSock |
Username | GreenSock |
Uploaded | June 11, 2022 |
Rating | 4.5 |
Size | 2,559 Kb |
Views | 70,840 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Hide rerun on embedded pens | 1,392 Kb |
MorphSVGPlugin from GreenSock | 24,861 Kb |
Basic Starter Pen | 2,160 Kb |
Simple GSAP Demo for CSS3 Transitions Cage Match | 2,333 Kb |
GSPreloader | 3,864 Kb |
Easing | 2,043 Kb |
GSAP JS Banner Example | 6,467 Kb |
Support Starter Pen | 2,157 Kb |
Independent Transforms | 2,935 Kb |
Advanced SVG Shape Morphing | 6,342 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Loading Bar | Jaradlight | 2,333 Kb |
CSS Tooltips | Darylldoyle | 2,599 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Drop Cap | Gsaiki | 1,571 Kb |
DNA Double Helix | Hugo | 5,112 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!