css实现五边形旋转效果代码

2019-08-05
<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <title>3D旋转5边型</title>
 <style type="text/css">
 .container {
 perspective: 500px;
 width: 200px;
 height: 200px;
 margin: 200px auto 0;
 }
 .face-box {
 position: relative;
 width: 200px;
 height: 200px;
 transform-style: preserve-3d;
 transform-origin: 50% 50%;
 animation: rotatea 15s linear infinite alternate;
 }
 @keyframes rotatea {
 100% {
 transform: rotateX(360deg);
 }
 }
 .face-box .face {
 position: absolute;
 width: 200px;
 height: 200px;
 font-size: 100px;
 text-align: center;
 line-height: 200px;
 }
 .one{
 background: rgba(0, 0, 255, 1);
 transform: rotateX(0deg) translateZ(138px);
 }
 .two {
 background: rgba(255, 0, 255, 1);
 transform: rotateX(288deg) translateZ(138px);
 }
 .three{
 background: rgba(0, 255, 255, 1);
 transform: rotateX(216deg) translateZ(138px);
 }
 .four{
 background: rgba(255, 0, 0, 1);
 transform: rotateX(144deg) translateZ(138px);
 }
 .five {
 background: rgba(0, 255, 0, 1);
 transform: rotateX(72deg) translateZ(138px);
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="face-box">
 <div class="face one">1</div>
 <div class="face two">2</div>
 <div class="face three">3</div>
 <div class="face four">4</div>
 <div class="face five">5</div>
 </div>
 </div>
</body>
</html>