Css Rotating 3d cubes different speed

Developer
Robert Borghesi
Size
2,364 Kb
Views
34,391
  1. Css Rotating 3d cubes different speed Previews
  2. Css Rotating 3d cubes different speed HTML Codes
  3. Css Rotating 3d cubes different speed CSS Codes

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
Sorting with morphing content
Fullscreen slice hero slider
Opening with auto typing responsive sentences with random background color loop
Opening animation from circular avatar
Simple PureCss dropdown menu with following subnav
Anaglyph 3D with CSS-blend on mouseMove
Continuous scrolling background of sticky header
SlamDunk Parallax on MouseMove
Envato Remix Contest Challenge
Enel brand - logo animation with tweenmax
Create amazing sales emails 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!