3D cube flip

Developer
Antonija Simic
Size
2,794 Kb
Views
18,216
  1. 3D cube flip Previews
  2. 3D cube flip HTML Codes
  3. 3D cube flip CSS Codes
  4. 3D cube flip JS Codes

How do I make an 3d cube flip?

3D cube flip. What is a 3d cube flip? How do you make a 3d cube flip? This script and codes were developed by Antonija Simic on 28 September 2022, Wednesday.

3D cube flip Previews
IQ Test

3D cube flip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D cube flip</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="cube"> <div class="front"> <h1>front</h1> </div> <div class="back"> <h1>back</h1> </div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> </div> <p>I know this is tough design world for boxes, but still click on the poor box to see its magnificant 3D rotation. Woohoo for the box! </p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D cube flip - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300italic,300);
body,
html { padding: 0; margin: 0; width: 100%; height: 100%; background: #8E44AD; font-family: "Source Sans Pro"; font-weight: 300;
}
.wrapper { -webkit-perspective: 10000px; -moz-perspective: 10000px; perspective: 10000px; -webkit-perspective-origin: 50% 100px; -moz-perspective-origin: 50% 100px; perspective-origin: 50% 100px; width: 100%; text-align: center; margin-top: 100px;
}
h1 { color: #fff; font-weight: 500; display: table-cell; vertical-align: middle;
}
.cube { position: relative; width: 200px; height: 200px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(10deg); -moz-transform: rotateY(10deg); -ms-transform: rotateY(10deg); -o-transform: rotateY(10deg); transform: rotateY(10deg); display: inline-block; margin: 0 auto;
}
.cube:hover { cursor: pointer;
}
.front,
.back { background: #446CB3;
}
.cube div { position: absolute; width: 100%; height: 100%; border: 1px solid rgba(0, 0, 0, 0.5); text-transform: uppercase; display: table;
}
.back { -webkit-transform: translateZ(-100px) translateY(12px) rotateY(180deg); -moz-transform: translateZ(-100px) translateY(12px) rotateY(180deg); -ms-transform: translateZ(-100px) translateY(12px) rotateY(180deg); -o-transform: translateZ(-100px) translateY(12px) rotateY(180deg); transform: translateZ(-100px) translateY(12px) rotateY(180deg);
}
.right { -webkit-transform: rotateY(-270deg) translateX(100px) translateY(13px) scale(.4, 1) skewY(4deg); -moz-transform: rotateY(-270deg) translateX(100px) translateY(13px) scale(.4, 1) skewY(4deg); -ms-transform: rotateY(-270deg) translateX(100px) translateY(13px) scale(.4, 1) skewY(4deg); -o-transform: rotateY(-270deg) translateX(100px) translateY(13px) scale(.4, 1) skewY(4deg); transform: rotateY(-270deg) translateX(100px) translateY(13px) scale(.4, 1) skewY(4deg); -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right;
}
.left,
.right,
.bottom,
.top { background: #2C3E50;
}
.left { -webkit-transform: rotateY(270deg) translateY(13px) translateX(-101px) scale(.4, 1) skewY(-4deg); -moz-transform: rotateY(270deg) translateY(13px) translateX(-101px) scale(.4, 1) skewY(-4deg); -ms-transform: rotateY(270deg) translateY(13px) translateX(-101px) scale(.4, 1) skewY(-4deg); -o-transform: rotateY(270deg) translateY(13px) translateX(-101px) scale(.4, 1) skewY(-4deg); transform: rotateY(270deg) translateY(13px) translateX(-101px) scale(.4, 1) skewY(-4deg); -webkit-transform-origin: center left; -moz-transform-origin: center left; -ms-transform-origin: center left; -o-transform-origin: center left; transform-origin: center left;
}
.top { -webkit-transform: rotateX(-81deg) translateY(17px) translateZ(-3px) scale(1, .4); -moz-transform: rotateX(-81deg) translateY(17px) translateZ(-3px) scale(1, .4); -ms-transform: rotateX(-81deg) translateY(17px) translateZ(-3px) scale(1, .4); -o-transform: rotateX(-81deg) translateY(17px) translateZ(-3px) scale(1, .4); transform: rotateX(-81deg) translateY(17px) translateZ(-3px) scale(1, .4); -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center;
}
.bottom { -webkit-transform: rotateX(105deg) translateY(-15px) translateZ(12px) scale(1, .4); -moz-transform: rotateX(105deg) translateY(-15px) translateZ(12px) scale(1, .4); -ms-transform: rotateX(105deg) translateY(-15px) translateZ(12px) scale(1, .4); -o-transform: rotateX(105deg) translateY(-15px) translateZ(12px) scale(1, .4); transform: rotateX(105deg) translateY(-15px) translateZ(12px) scale(1, .4); -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center;
}
.front { -webkit-transform: translateZ(-18px) translateY(-2px); -moz-transform: translateZ(-18px) translateY(-2px); -ms-transform: translateZ(-18px) translateY(-2px); -o-transform: translateZ(-18px) translateY(-2px); transform: translateZ(-18px) translateY(-2px);
}
@keyframes spin { from { transform: rotateY(10deg) } to { transform: rotateY(-170deg); }
}
@webkit-keyframes spin { from { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); } to { -webkit-transform: rotateY(-170deg); transform: rotateY(-170deg); }
}
@moz-keyframes spin { from { -moz-transform: rotateY(10deg); transform: rotateY(10deg); } to { -moz-transform: rotateY(-170deg); transform: rotateY(-170deg); }
}
@keyframes unspin { from { transform: rotateY(-170deg); } to { transform: rotateY(10deg); }
}
@-webkit-keyframes unspin { from { -webkit-transform: rotateY(-170deg); transform: rotateY(-170deg); } to { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); }
}
@-moz-keyframes unspin { from { -moz-transform: rotateY(-170deg); transform: rotateY(-170deg); } to { -moz-transform: rotateY(10deg); transform: rotateY(10deg); }
}
.unspin { -webkit-animation: unspin 2s forwards; -moz-animation: unspin 2s forwards; -o-animation: unspin 2s forwards; animation: unspin 2s forwards;
}
.spin { -webkit-animation: spin 2s forwards; -moz-animation: spin 2s forwards; -o-animation: spin 2s forwards; animation: spin 2s forwards;
}
p { margin-top: 50px; font-size: 2em; width: 50%; margin: 50px auto; color: #fff;
}

3D cube flip - Script Codes JS Codes

 $(".cube").on("click tap", function() { $(".cube").removeClass("unspin").addClass("spin"); setTimeout(function() { $(".cube").addClass("unspin").removeClass("spin") }, 2500); });
3D cube flip - Script Codes
3D cube flip - Script Codes
Home Page Home
Developer Antonija Simic
Username tonkec
Uploaded September 28, 2022
Rating 3
Size 2,794 Kb
Views 18,216
Do you need developer help for 3D cube 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!

Antonija Simic (tonkec) Script Codes
Name
Simple text hover effect
CSS refrigerator
Pure CSS bread-loaf carousel
A Pen by Antonija Simic
Pure css navigation revealed on hover
Pure CSS hamburger icons transition
Static website for free workshop
Simple responsive slides
Sidebar with smooth transition
CSS preloader
Create amazing SEO content 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!