CSS Only 3D Spinning Text

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



Leave a reply



Submit