有三种主要类型的文本旋转:
1. rotateX – 这是沿着X轴(水平轴)旋转。可以想象成在X轴上沿水平翻转文本。
2. rotateY – 这是沿着Y轴(垂直轴)旋转。可以想象成在Z轴上沿水平翻转文本。
3. rotateZ – 这是围绕Z轴(depth 轴)旋转。可以想象成绕着文本本身的轴心旋转。
正值度数表示顺时针旋转,负值度数表示逆时针旋转。
例如:
– transform: rotateX(180deg); 表示围绕X轴180°顺时针旋转
– transform: rotateY(-90deg); 表示围绕Y轴90°逆时针旋转
– transform: rotateZ(45deg); 表示围绕Z轴45°顺时针旋转
Html部分
<div class="box"> <p class="mloun">Wordpress外贸建站</p> <p class="mloun">外贸独立站</p> <p class="mloun">Wordpress独立站建站</p> </div>
CSS部分
.box{
position: relative;
}
p.mloun{
position:absolute;
opacity: 0;
animation-name: textFader;
animation-duration: 9s; /* <---{ 6sec * num(H2) = 18sec } */
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.mloun:first-of-type { animation-delay: 0s; }
.mloun:nth-of-type(2) { animation-delay: 3s; }
.mloun:last-of-type { animation-delay: 6s; }
@keyframes textFader {
0% {
opacity: 0;
} /* fade-in */
11% {
opacity: 1;
} /* show */
22% {
opacity: 1;
} /* fade-out */
33% { /* <-------------------{ 100% / num(H2) = 33% } */
opacity: 0;
} /* waiting for the finish animation of other blocks */
100% {
opacity: 0;
}
}
效果预览
Wordpress外贸建站
外贸独立站
Wordpress独立站建站
文本翻转效果
要实现以文本垂直翻转，可以增加:ransform: rotateX(0deg)
例如
@keyframes textFader {
0% {
opacity: 0;transform: rotateX(0deg);
} /* fade-in */
11% {
opacity: 1;transform: rotateX(-40deg);
} /* show */
22% {
opacity: 1;transform: rotateX(90deg);
} /* fade-out */
33% { /* <-------------------{ 100% / num(H2) = 33% } */
opacity: 0;
} /* waiting for the finish animation of other blocks */
100% {
opacity: 0;
}
}
为了让翻转更加明显，我们需要在翻转文本的上一级增加透视CSS
box{perspective: 300px;}
要实现以文本底部作为倾斜轴来翻转文本,你可以这样做:
.mloun{transform-origin: bottom center;/* 以文本底部为原点 */}
Wordpress外贸建站
外贸独立站
Wordpress独立站建站
