css3實現的旋轉的陀螺效果

antzone發表於2017-03-07
CSSS3

分享一段程式碼例項，它實現了旋轉的陀螺效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.wrap{
  width:200px;
  height:400px;
  margin:130px auto
}
.wrap .tuoluo{
  width: 100%;
  height: 100%;
  /*在 3D 空間中呈現*/
  transform-style: preserve-3d;
}
/*定義動畫*/
@keyframes tuoluo {
  0%{
    transform: rotateY(0deg)  rotateX(0deg);
  }
  25%{
    transform: rotateY(-90deg)  rotateX(9deg);
  }
  50%{
    transform: rotateY(-180deg)  rotateX(18deg);
  }
  75%{
    transform: rotateY(-270deg)  rotateX(9deg);
  }
  100%{
    transform: rotateY(-360deg)  rotateX(0deg);
  }
}
.wrap .tuoluo{
  position: relative;
  width: 100%;
  height: 100%;
  /*迴圈動畫*/
  animation: tuoluo 3s linear infinite;
}
.tuoluo-top .face-top{
  width: 0;
  height: 0;
  /*用border畫三角形*/
  border-style: solid;
  border-color: transparent;
  border-width:0 50px 170px;
  border-bottom-color: rgba(10, 19, 136,0.5);
  /*設定旋轉元素的基點位置*/
  transform-origin: center bottom;
  position: absolute;
  top: 29px;
}
.tuoluo-top .face-top:nth-of-type(1){
  transform:rotateY(0deg) translateZ(88px) rotateX(31deg);
}
.tuoluo-top .face-top:nth-of-type(2){
  transform:rotateY(60deg) translateZ(88px) rotateX(31deg);
}
.tuoluo-top .face-top:nth-of-type(3){
  transform:rotateY(120deg) translateZ(88px) rotateX(31deg);
}
.tuoluo-top .face-top:nth-of-type(4){
  transform:rotateY(180deg) translateZ(88px) rotateX(31deg);
}
.tuoluo-top .face-top:nth-of-type(5){
  transform:rotateY(240deg) translateZ(88px) rotateX(31deg);
}
.tuoluo-top .face-top:nth-of-type(6){
  transform:rotateY(300deg) translateZ(88px) rotateX(31deg);
}
.tuoluo-buttom .face-bottom{
  width: 0px;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width:170px 50px 0px;
  border-top-color: rgba(209, 59, 10, 0.5);
  /*設定旋轉元素的基點位置*/
  transform-origin: center top;
  position: absolute;
  top: 50%;
}
.tuoluo-buttom .face-bottom:nth-of-type(1){
  transform:rotateY(0deg) translateZ(88px) rotateX(-31deg);
}
.tuoluo-buttom .face-bottom:nth-of-type(2){
  transform:rotateY(60deg) translateZ(88px) rotateX(-31deg);
}
.tuoluo-buttom .face-bottom:nth-of-type(3){
  transform:rotateY(120deg) translateZ(88px) rotateX(-31deg);
}
.tuoluo-buttom .face-bottom:nth-of-type(4){
  transform:rotateY(180deg) translateZ(88px) rotateX(-31deg);
}
.tuoluo-buttom .face-bottom:nth-of-type(5){
  transform:rotateY(240deg) translateZ(88px) rotateX(-31deg);
}
.tuoluo-buttom .face-bottom:nth-of-type(6){
  transform:rotateY(300deg) translateZ(88px) rotateX(-31deg);
}
</style>
</head>
<body>
<div class="wrap">
  <div class="tuoluo">
    <div class="tuoluo-top">
      <div class="face-top"></div>
      <div class="face-top"></div>
      <div class="face-top"></div>
      <div class="face-top"></div>
      <div class="face-top"></div>
      <div class="face-top"></div>
    </div>
    <div class="tuoluo-buttom">
      <div class="face-bottom"></div>
      <div class="face-bottom"></div>
      <div class="face-bottom"></div>
      <div class="face-bottom"></div>
      <div class="face-bottom"></div>
      <div class="face-bottom"></div>
    </div>
  </div>
</div>
</body>
</html>

相關文章