CSS only 3D spinning text
Simple text-shadow
can do the trick:
body { perspective: 500px;}#spinner { text-align: center; animation-name: spin, depth; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 3s;}@keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); }}@keyframes depth { 0% { text-shadow: 0 0 black; } 25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black; } 50% { text-shadow: 0 0 black; } 75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black; } 100% { text-shadow: 0 0 black; }}
<p id="spinner">Stop, I'm getting dizzy!</p>
How to rotate a 3d cube along x axis using css?
I see for the <div>
tags you have under the cube
class, you have comments saying which are supposed to be the front side, back side, left side, etc. Simply put in classes for the names of each side and then add the following CSS for each. Then you will need to put in a keyframes
selector and animation
attribute to rotate the cube on the x-axis. My code snippet shows the full CSS followed by the full HTML:
.back { transform: translateZ(-100px) rotateY(180deg); background-color: red; opacity: 0.5;}
.right { transform: rotateY(-270deg) translateX(100px); transform-origin: top right; background-color: green; opacity: 0.5;}
.left { transform: rotateY(270deg) translateX(-100px); transform-origin: center left; background-color: yellow; opacity: 0.5;}
.top { transform: rotateX(-90deg) translateY(-100px); transform-origin: top center; background-color: purple; opacity: 0.5;}
.bottom { transform: rotateX(90deg) translateY(100px); transform-origin: bottom center; background-color: orange; opacity: 0.5;}
.front { transform: translateZ(100px); background-color: blue; opacity: 0.5;}
.wrapper { perspective: 800px; perspective-origin: 50% 100px; margin-left: 100px; margin-top: 100px;}
.cube { position: relative; width: 200px; transform-style: preserve-3d; animation: spin 5s infinite linear;}
.cube div { position: absolute; width: 200px; height: 200px; text-align: center;}
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); }}
<div class="wrapper"> <div class="cube"> <div class="front">Front</div> <div class="back">Back</div> <div class="top">Top</div> <div class="bottom">Bottom</div> <div class="left">Left</div> <div class="right">Right</div> </div></div>
How to rotate div 360 in 3D in Y axis?
You need to actually make the rotation
animation. In the site you specified, it is defined as:
@-webkit-keyframes rotation {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg); }
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg); }
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg); } }
@keyframes rotation {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg); }
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg); }
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg); } }
For an explanation on how CSS animations work, see this MDN article.
Create a rotating cube with ONLY CSS
There are tons of tutorials/examples show how to do this: Example 1 Example 2 Example 3 Example 4 etc.
Pulled from Example 2:
.spinner div { position: absolute; width: 120px; height: 120px; border: 1px solid #ccc; background: rgba(255,255,255,0.8); box-shadow: inset 0 0 20px rgba(0,0,0,0.2); text-align: center; line-height: 120px; font-size: 100px;}
.spinner .face1 { -webkit-transform: translateZ(60px); -ms-transform: translateZ(60px); transform: translateZ(60px);}.spinner .face2 { -webkit-transform: rotateY(90deg) translateZ(60px); -ms-transform: rotateY(90deg) translateZ(60px); transform: rotateY(90deg) translateZ(60px); }.spinner .face3 { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); transform: rotateY(90deg) rotateX(90deg) translateZ(60px); }.spinner .face4 { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); }.spinner .face5 { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); }.spinner .face6 { -webkit-transform: rotateX(-90deg) translateZ(60px); -ms-transform: rotateX(-90deg) translateZ(60px); transform: rotateX(-90deg) translateZ(60px); }
.spinner { -webkit-animation: spincube 12s ease-in-out infinite; animation: spincube 12s ease-in-out infinite; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 60px 60px 0; -ms-transform-origin: 60px 60px 0; transform-origin: 60px 60px 0;}
@-webkit-keyframes spincube { 16% { -webkit-transform: rotateY(-90deg); } 33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); } 50% { -webkit-transform: rotateY(180deg) rotateZ(90deg); } 66% { -webkit-transform: rotateY(90deg) rotateX(90deg); } 83% { -webkit-transform: rotateX(90deg); }}@keyframes spincube { 16% { -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); } 33% { -ms-transform: rotateY(-90deg) rotateZ(90deg); transform: rotateY(-90deg) rotateZ(90deg); } 50% { -ms-transform: rotateY(180deg) rotateZ(90deg); transform: rotateY(180deg) rotateZ(90deg); } 66% { -ms-transform: rotateY(90deg) rotateX(90deg); transform: rotateY(90deg) rotateX(90deg); } 83% { -ms-transform: rotateX(90deg); transform: rotateX(90deg); }}
<div id="stage" style="width: 120px; height: 120px;"> <div class="spinner"> <div class="face1">1</div> <div class="face2">2</div> <div class="face3">3</div> <div class="face4">4</div> <div class="face5">5</div> <div class="face6">6</div> </div></div>
JS manipulate CSS 3D rotating animation
You just need to resume animation and wait for 1/4 of animation duration.
Simplified your code (removed vendor prefixes, most of browsers work OK without them, but reapply them if needed). Demo:
var spinner = document.querySelector("#spinner");// get animation duration in msvar animationDuration = parseFloat(window.getComputedStyle(spinner)["animation-duration"]) * 1000;
spinner.addEventListener("click", function() { // run animation spinner.style["animation-play-state"] = "running"; // pause animation after animationDuration / 4 setTimeout(function() { spinner.style["animation-play-state"] = "paused"; }, animationDuration / 4);});
@keyframes spinner { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); }}
#stage { margin: 1em auto; perspective: 1200px;}
#spinner { animation-name: spinner; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 6s; animation-play-state: paused; /* new */ transform-style: preserve-3d;}
#spinner div,#spinner img { position: absolute; border: 1px solid #ccc; background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);}
<div id='stage' style='height: 160px; width: 180px;'> <div id='spinner'> <div style='transform: rotateY(90deg) translateZ(90px); padding: 0 0px; background: red; width: 180px; height: 160px; display: inline-block;' class='rotating'>A</div> <div style='transform: rotateY(180deg) translateZ(90px); padding: 0 0; background: blue; width: 180px; height: 160px; display: inline-block;'>B</div> <div style='transform: rotateY(270deg) translateZ(90px); padding: 0 0; background: green; width: 180px; height: 160px; display: inline-block;'>C</div> <div style='transform: rotateY(360deg) translateZ(90px); padding: 0 0; background: yellow; width: 180px; height: 160px; display: inline-block;' class='rotating'>D</div> </div></div>
CSS endless rotation animation
Works in all modern browsers
.rotate{
animation: loading 3s linear infinite;
@keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
}
Related Topics
Considerations for CSS3 Transition Performance
CSS Selector for an Element Having Class .A and Class .B
Pace.Js "Hide Everything But Pace Until The Page Has Fully Loaded" Local Copy
Input Text Very Small When Hovering on Autofill Suggestion
Slide Out Panel with Bootstrap
How to Apply a CSS Rule to All Descendants of an Elements
Bootstrap: Multiple Nested Rows Within Row
Why Is My Text Being Cut Off in Ie7
Find All CSS Styles Used on Website
Responsive CSS - Target 1024 X 768 Screen Size Only
Chrome Devtools Converts All Hex Colors to Rgb
How to Get The CSS Counter Value of The Parent
CSS Text-Align: Center; Is Not Centering Things
Change Font Sizes with Style Sheets for Rstudio Presentation
How to Render Segoe UI Font in Different Navigators and Os's
How to Use Pseudo Selectors in Material-Ui
Angular Material Overriding Default Style of Snackbar Component