文本旋转

下载代码

html

css

分享到微信朋友圈

html

<div id="stage">
  <div id="rotate">
    <div id="ring-1" class="ring">
      <div class="poster" style="-webkit-transform: rotateX(0deg) translateZ(100px); ">
        <p>jQuery JavaScript 1<br>
          Sit Amet</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(30deg) translateZ(100px); ">
        <p>jQuery JavaScript 2<br>
          Amet Lorem
        </p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(60deg) translateZ(100px); ">
        <p>jQuery JavaScript 3</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(90deg) translateZ(100px); ">
        <p>jQuery JavaScript 4<br>
          Ipsum Lorem
        </p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(120deg) translateZ(100px); ">
        <p>jQuery JavaScript 5<br>
          Sit Amet
        </p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(150deg) translateZ(100px); ">
        <p>jQuery JavaScript 6<br>
          Sit Lorem
        </p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(180deg) translateZ(100px); ">
        <p>jQuery JavaScript 7<br>
          Sit Lorem Ipsum
        </p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(210deg) translateZ(100px); ">
        <p>jQuery JavaScript 8<br>
          Sit Amet
        </p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(240deg) translateZ(100px); ">
        <p>jQuery JavaScript 9<br>
          Lorem
        </p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(270deg) translateZ(100px); ">
        <p>jQuery JavaScript 10<br>
          Amet Lorem
        </p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(300deg) translateZ(100px); ">
        <p>jQuery JavaScript 11<br>
          Sit Amet
        </p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(330deg) translateZ(100px); ">
        <p>jQuery JavaScript 12<br>
          Ipsum Dolor
        </p>
      </div>
    </div>
  </div>
</div>

css

body {
  font-family: 'Lucida Grande', Verdana, Arial;
  font-size: 12px;
  background: turquoise;
}
#stage {
  margin: 150px auto;
  width: 300px;
  height: 200px;
  position: relative;
  /* Setting the perspective of the contents of the stage
        but not the stage itself */
  -webkit-perspective: 800;
}
#rotate {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  /* Ensure that we're in 3D space */
  -webkit-transform-style: preserve-3d;
}
.ring {
  margin: 0 auto;
  height: 55px;
  width: 400px;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
#stage:after { 
  display: block; 
  content: ''; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: -80px; 
  bottom: 70px; 
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#40e0d0+0,40e0d0+100&1+0,0+25,0+75,1+100 */
background: -moz-linear-gradient(top,  rgba(64,224,208,1) 0%, rgba(64,224,208,0) 25%, rgba(64,224,208,0) 75%, rgba(64,224,208,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(64,224,208,1) 0%,rgba(64,224,208,0) 25%,rgba(64,224,208,0) 75%,rgba(64,224,208,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(64,224,208,1) 0%,rgba(64,224,208,0) 25%,rgba(64,224,208,0) 75%,rgba(64,224,208,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e0d0', endColorstr='#40e0d0',GradientType=0 ); /* IE6-9 */
}
.poster {
  background-color: turquoise;
  position: absolute;
  left: 100px;
  width: 200px;
  height: 54px;
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
}
/*
     设置每一行具有不同的动画持续时间
       和交替的 y 轴旋转方向。
      */

#ring-1 {
  animation-name: x-spin;
  animation-duration: 8s;
}

在这里，我们定义了将用于产生 3D 旋转效果的单个动画。 它将在 x 轴上执行完整旋转，我们将在整个对象集上使用它。
       请注意，即使您使用单独的转换构造，您目前也必须为旋转指定一个中间步骤。

@-webkit-keyframes x-spin {
  0% {
    -webkit-transform: rotateX(360deg);
  }
  50% {
    -webkit-transform: rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateX(0deg);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg