Vertical animated text rotation - css

Question

I need to create vertical animated text rotation for my homepage.
I found this very nice example. It uses the CSS property transform: rotateX(0deg); rotateX(90deg); etc.
But there are only four lines of text and I need 6 sentences. Any idea how to make same effect with more than 4 sentences?
.home{
width:100%;
}
.home:before{
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.9);
}
.home h3{
position:absolute;
font-size:74px;
text-align: left;
color:#009393;
margin-left:15%;
font-weight:700;
}
.stage{
width: auto;
margin-top: 15px;
height: 100px;
}
.cubespinner{
-webkit-animation-name:spincube;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:8s;
animation-name:spincube;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:8s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform-origin:40px 40px 0;
-moz-transform-origin:40px 40px 0;
-ms-transform-origin:40px 40px 0;
transform-origin:40px 40px 0;
}
.cubespinner div{
position:absolute;
width:400px;
height:80px;
text-align:left;
color:#109393;
font-family:'Raleway', sans-serif;
font-size:74px;
font-weight:700;
}
.cubespinner .face1{
color:#f1c40f;
-webkit-transform:translateZ(40px);
-moz-transform:translateZ(40px);
-ms-transform:translateZ(40px);
transform:translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face2{
color:#fff;
-webkit-transform: rotateX(90deg) translateZ(40px);
-moz-transform: rotateX(90deg) translateZ(40px);
-ms-transform: rotateX(90deg) translateZ(40px);
transform: rotateX(90deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face3{
color:#f85555;
-webkit-transform:rotateX(180deg) translateZ(40px);
-moz-transform:rotateX(180deg) translateZ(40px);
-ms-transform:rotateX(180deg) translateZ(40px);
transform:rotateX(180deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face4{
color:#fff;
-webkit-transform:rotateX(270deg) translateZ(40px);
-moz-transform:rotateX(270deg) translateZ(40px);
-ms-transform:rotateX(270deg) translateZ(40px);
transform:rotateX(270deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
/*Cubical Flipping or rotation*/
#-webkit-keyframes spincube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
15% { -webkit-transform: rotateX(90deg);}
25% { -webkit-transform: rotateX(90deg);}
40% { -webkit-transform: rotateX(180deg);}
50% { -webkit-transform: rotateX(180deg);}
65% { -webkit-transform: rotateX(270deg);}
75% { -webkit-transform: rotateX(270deg);}
95% { -webkit-transform: rotateX(360deg);}
100% { -webkit-transform: rotateX(360deg);}
}#keyframes spincube {
from,to {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
15% {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
25% {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
40% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
65% {
-webkit-transform: rotateX(270deg);
-moz-transform: rotateX(270deg);
-ms-transform: rotateX(270deg);
transform: rotateX(270deg);
}
75% {
-webkit-transform: rotateX(270deg);
-moz-transform: rotateX(270deg);
-ms-transform: rotateX(270deg);
transform: rotateX(270deg);
}
90% {
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
}
100% {
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
}
<div class="home col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 id="resizing-h3" class="" >
<span>
<div class="stage">
<div class="cubespinner">
<div class="face1">Innovative</div>
<div class="face2">Creative</div>
<div class="face3">Unbeatable</div>
<div class="face4">Exceptional</div>
</div>
</div>
</span>
</h3>
</div>

Answer 1

Use of a blank sentence in 2 places
I've attached a code.
It is simple, I just duplicated the div "cubespinner" and make 6 sentences, like you want.
It's a lightweight solution, not for any number of sentences, but it's enough for 6 :)
.home{
width:100%;
}
.home:before{
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.9);
}
.home h3{
position:absolute;
font-size:74px;
text-align: left;
color:#009393;
margin-left:15%;
font-weight:700;
}
.stage{
width: auto;
margin-top: 15px;
height: 100px;
}
.cubespinner{
animation-name:spincube;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:12s;
transform-style:preserve-3d;
transform-origin:40px 40px 0;
}
.cubespinner2{
animation-name:spincube;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:12s;
animation-delay: 6s;
transform-style:preserve-3d;
transform-origin:40px 40px 0;
}
.cubespinner div, .cubespinner2 div{
position:absolute;
width:400px;
height:80px;
text-align:left;
color:#109393;
font-family:'Raleway', sans-serif;
font-size:74px;
font-weight:700;
}
.cubespinner .face1, .cubespinner2 .face1{
color:#f1c40f;
transform:translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face2, .cubespinner2 .face2{
color:#fff;
transform: rotateX(90deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face3, .cubespinner2 .face3{
color:#f85555;
transform:rotateX(180deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face4, .cubespinner2 .face4{
color:#f1c40f;
transform:rotateX(270deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
/*Cubical Flipping or rotation*/
#-webkit-keyframes spincube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
5% { -webkit-transform: rotateX(90deg);}
16% { -webkit-transform: rotateX(90deg);}
21% { -webkit-transform: rotateX(180deg);}
33% { -webkit-transform: rotateX(180deg);}
38% { -webkit-transform: rotateX(270deg);}
50% { -webkit-transform: rotateX(270deg);}
55% { -webkit-transform: rotateX(360deg);}
100% { -webkit-transform: rotateX(360deg);}
}
<div class="home col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 id="resizing-h3" class="" >
<span>
<div class="stage">
<div class="cubespinner">
<div class="face1"></div>
<div class="face2">Creative</div>
<div class="face3">Unbeatable</div>
<div class="face4">Exceptional</div>
</div>
<div class="cubespinner2">
<div class="face1"></div>
<div class="face2">666666</div>
<div class="face3">555555</div>
<div class="face4">Innovative</div>
</div>
</div>
</span>
</h3>
</div>