css3實現動態摺疊生成立方體旋轉效果

admin發表於2017-03-18
CSSS3

分享一段程式碼例項，它實現了動態摺疊生成立方體。

並且在生成之後，能夠進行3D旋轉效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#view {
  margin: 200px auto;
  height: 200px;
  width: 200px;
  perspective: 500px;
  perspective-origin: 250px -50px;
}
 
@keyframes scroll {
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}
 
#cube {
  height: 200px;
  width: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: scroll 2s linear 7s infinite;
  border-radius: 50%;
}
 
#cube:hover {
  animation-play-state: paused;
}
 
.item {
  height: 200px;
  width: 200px;
  position: absolute;
  border: 1px solid black;
  background-color: pink;
  opacity: 1;
}
 
img {
  height: 200px;
  width: 200px;
  -webkit-filter: grayscale(1);
  transition: all 0.5s ease;
  cursor: pointer;
  border-radius: 50%;
}
 
img:hover {
  -webkit-filter: grayscale(0);
  transform: scale(1.2,1.2);
}
 
@keyframes item1 {
  100% {
    transform: rotateY(-90deg);
  }
}
 
#item1 {
  z-index: 6;
  transform-origin: left;
  animation: item1 1s linear 1s both;
}
 
@keyframes item2 {
  100% {
    transform: rotateY(90deg);
  }
}
 
#item2 {
  z-index: 5;
  transform-origin: right;
  animation: item2 1s linear 2s both;
}
 
@keyframes item3 {
  100% {
    transform: rotateX(90deg);
  }
}
 
#item3 {
  z-index: 4;
  transform-origin: top;
  animation: item3 1s linear 3s both;
}
 
@keyframes item4 {
  100% {
    transform: rotateX(-90deg);
  }
}
 
#item4 {
  z-index: 3;
  transform-origin: bottom;
  animation: item4 1s linear 4s both;
}
 
@keyframes item5 {
  100% {
    transform: translateZ(200px);
  }
}
 
#item5 {
  z-index: 2;
  animation: item5 1s linear 5s both;
}
 
@keyframes item6 {
  100% {
    transform: rotateY(180deg);
  }
}
 
#item6 {
  z-index: 1;
  animation: item6 1s linear 6s both;
}
</style>
</head>
<body>
  <div id="view">
    <div id="cube">
      <div class="item" id="item1"></div>
      <div class="item" id="item2"></div>
      <div class="item" id="item3"></div>
      <div class="item" id="item4"></div>
      <div class="item" id="item5"></div>
      <div class="item" id="item6"></div>
    </div>
  </div>
</body>

上面的程式碼實現了我們的要求，更多內容參閱相關閱讀。

相關閱讀:

（1）.perspective可以參閱CSS3 perspective一章節。

（2）.perspective-origin可以參閱CSS3 perspective-origin一章節。

（3）.@keyframes可以參閱CSS3 @keyframes一章節。

（4）.transform可以參閱CSS3 transform屬性一章節。

（5）.transform-style可以參閱CSS3 transform-style一章節。

（6）.animation可以參閱CSS3 animation一章節。

（7）.border-radius可以參閱border-radius一章節。

（8）.animation-play-state可以參閱css3 animation-play-state一章節。

（9）.opacity屬性可以參閱opacity屬性用法簡單介紹一章節。

（10）.filter可以參閱css3 filter屬性一章節。

（11）.transform-origin可以參閱CSS3 transform-origin一章節。

相關文章