css 文字 3d旋转动画,CSS3 简单的三维文字旋转动画

CSS

语言：

CSSSCSS

确定

*,

*:after,

*:before {

box-sizing: border-box;

}

html {

height: 100vh;

background: orange;

}

@-webkit-keyframes rotator {

0% {

transform: rotate3d(0, 1, 0, 0deg);

}

100% {

transform: rotate3d(0, 1, 0, 360deg);

}

}

section {

width: 400px;

height: 300px;

position: absolute;

top: calc(50% - 150px);

left: calc(50% - 200px);

perspective: 300px;

}

section .holder {

transform-style: preserve-3d;

-webkit-animation: rotator 10s linear infinite;

}

section .holder > div {

color: white;

font-family: 'Changa One', cursive;

font-size: 350px;