css - 垂直动画文本旋转
问题描述
我需要为我的主页创建垂直动画文本旋转。
我发现了这个非常好的例子。它使用 CSS 属性transform: rotateX(0deg); rotateX(90deg);
等。
但是只有四行文字,我需要六句话。知道如何用超过 4 个句子产生相同的效果吗?
.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>
解决方案
2处使用空句
我附上了一个代码。很简单,我只是复制了 div “cubespinner” 并按照您的要求制作了 6 个句子。
这是一个轻量级的解决方案,不适合任何数量的句子,但对于 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>
推荐阅读
- android - 我如何在科尔多瓦应用程序(离子 4)中添加新的/更改旧的 SplashScreen
- javascript - VUE.js 记录未定义
- javascript - 如何使单击事件仅在文本上触发(而不是同一元素中的其他空格)
- elasticsearch - Elasticsearch 翻转日期
- azure - Azure Cosmos DB 更改源重试特定文档
- java - 似乎 JavaMail 的 MimeBodyPart.setFileName 在电子邮件中插入换行符并导致文件名显示为无效
- c++ - 如何创建调用特定函数的函数对象
- sql - 需要 MS Access 表单字段根据给定参数自动计算和分配成本
- vb.net - 从用户控件中的面板获取价值
- c# - 使用 TextAlignment.Center 计算 FormattedText 实例上的 x 偏移量