3D Transforms Flip

Developer
Patrick
Size
2,083 Kb
Views
12,144
  1. 3D Transforms Flip Previews
  2. 3D Transforms Flip HTML Codes
  3. 3D Transforms Flip CSS Codes
  4. 3D Transforms Flip JS Codes

How do I make an 3d transforms flip?

Using CSS 3D transform to "flip" content.. What is a 3d transforms flip? How do you make a 3d transforms flip? This script and codes were developed by Patrick on 21 November 2022, Monday.

3D Transforms Flip Previews
IQ Test

3D Transforms Flip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Transforms Flip</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="flipContainer"> <div class="flipCard"> <div class="card front">front</div> <div class="card back">back</div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

3D Transforms Flip - Script Codes CSS Codes

body { font-family: helvetica, sans-serif; color: #fff; }
.flipContainer { position: relative; width: 400px; height: 300px; margin: 100px auto; overflow: visible; background: rgba(0,100,200,.3); /* tell container its children now live in a 3d world! */ -webkit-perspective: 800px; perspective: 800px;
}
.flipCard { position: absolute; width: 400px; height: 300px; -webkit-transition: -webkit-transform 750ms; -webkit-transform-style: preserve-3d; transition: transform 750ms; transform-style: preserve-3d;
} .flipContainer:hover .flipCard { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.card { width: 400px; height: 300px; background-size: cover; font-size: 100px; font-weight: bold; position: absolute; top: 0; left: 0; -webkit-transform-origin: 50% 50%; -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform 750ms; -webkit-backface-visibility: hidden; transform-origin: 50% 50%; transform-style: preserve-3d; transition: -webkit-transform 750ms; backface-visibility: hidden;
}
.front { background: url("http://farm9.staticflickr.com/8080/8364114549_f9532f1074.jpg") no-repeat;
}
.back { background: url("http://farm9.staticflickr.com/8235/8585847956_39864361e3.jpg") no-repeat; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg);
}

3D Transforms Flip - Script Codes JS Codes

// css 3d transform card flip
3D Transforms Flip - Script Codes
3D Transforms Flip - Script Codes
Home Page Home
Developer Patrick
Username hinducows
Uploaded November 21, 2022
Rating 3
Size 2,083 Kb
Views 12,144
Do you need developer help for 3D Transforms Flip?

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!

Patrick (hinducows) Script Codes
Name
JQuery CSS Transition Content Slide-In
Log In Modal
Sloppy Panels
Item Display
Hexagon v2
3D Transforms
Overlay Drop Description
CSS Filters
Flat-ish UI Login Element
Arrow Navigation
Create amazing blog posts with AI!

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!