Css Rotating 3d cubes different speed

Developer
Robert Borghesi
Size
2,364 Kb
Views
34,391

How do I make an css rotating 3d cubes different speed?

Two different cubes rotating with different speed on hover. Based on a pic of Mike Hranica, frontman of The Devil Wears Prada.. What is a css rotating 3d cubes different speed? How do you make a css rotating 3d cubes different speed? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Css Rotating 3d cubes different speed Previews
IQ Test

Css Rotating 3d cubes different speed - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css Rotating 3d cubes different speed</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img class="hoverme" src="http://www.iltourdinibali.it/codepens/hover.png" />
<div class="content"> <div class="A up upA"></div> <div class="A down downA"></div> <div class="B up upB"><h1>MIKE HRANICA</h1>Frontman of the metalcore band "The devil wears prada"</div> <div class="B down downB"><div><span class="quote">"We're composing our funeral songs, note by note."</span><br><span class="title">(Reptar, King of the Ozone)</span> </div></div>
</div>
</body>
</html>

Css Rotating 3d cubes different speed - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:400,700,700italic);
*{ box-sizing: border-box;
}
html, body{ background-color: rgb(66,66,66); font-family: 'Raleway', sans-serif; color: #464646; font-family: 'Lato', sans-serif;
}
.hoverme{ margin: 0 auto; display: block; margin-bottom:-220px;
}
.content{ width: 250px; height: 400px; margin: 100px auto; position: relative; perspective: 500px; -webkit-perspective: 500px;
}
.A{ position: absolute; transform-origin:100% 50%; -webkit-transform-origin:100% 50%; z-index: 2;
}
.B{ position: absolute; transform-origin:0% 50%; -webkit-transform-origin:0% 50%; transform: rotateY(90deg); -webkit-transform: rotateY(90deg); z-index:1;
}
.up, .down{ width: 250px; height:200px;
}
.upA{ background:url("http://www.iltourdinibali.it/codepens/mike.jpg"); top:0px; left:0px; transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;
}
.downA{ background:yellow; top:200px; left:0px; transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; background:url("http://www.iltourdinibali.it/codepens/mike.jpg"); background-position: bottom; }
.upB{ top:0px; left:250px; transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; background:url("http://www.iltourdinibali.it/codepens/old_moon.jpg"); text-align:center;
}
.upB h1{ color: white; background:#464646; padding: 10px; position:relative; font-size:26px; font-weight: 700; line-height: 28px; display: inline-block; margin: 25px 0px 20px 0px;
}
.downB{ top:200px; left:250px; transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; background:url("http://www.iltourdinibali.it/codepens/old_moon.jpg"); padding:0px 25px; text-align:center; }
.downB div{ margin-top: 40px;
}
.downB .quote{ position:relative; font-size: 22px; font-weight: 700; font-style:italic;
}
.downB .title{ margin-top: 15px; display:block;
}
.content:hover .upA{ transform: rotateY(-90deg); -webkit-transform: rotateY(-90deg); left: -250px;
}
.content:hover .downA{ transform: rotateY(-90deg); -webkit-transform: rotateY(-90deg); left: -250px;
}
.content:hover .upB{ transform: rotateY(0deg); -webkit-transform: rotateY(0deg); left: 0px; z-index:3;
}
.content:hover .downB{ transform: rotateY(0deg); -webkit-transform: rotateY(0deg); left: 0px; z-index:3;
}
Css Rotating 3d cubes different speed - Script Codes
Css Rotating 3d cubes different speed - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 4.5
Size 2,364 Kb
Views 34,391
Do you need developer help for Css Rotating 3d cubes different speed?

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!

Robert Borghesi (dghez) Script Codes
Name
Opening animation from circular avatar
Pure custom css animation on new google logo
Enel brand - logo animation with tweenmax
Text-mask background moving on MouseMove - v2
Fullscreen slice hero slider
Pure Css Loader - Square
Sorting with morphing content
Animated title moving on scroll
Continuous scrolling background of sticky header
Easy parallax header
Create amazing Facebook ads 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!