小文 发表于 2023-7-2 16:55

试试套用别人做的翻转转不转

本帖最后由 小文 于 2023-7-2 17:15 编辑 <br /><br /><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css33d动画keyframes</title>
</head>
<body>
<style>/*************** ANIMATIONS ***************/
@-webkit-keyframes spin {
   from { -webkit-transform: rotateY(0); }
   to { -webkit-transform: rotateY(360deg); }
}
@-ms-keyframes spin {
   from { ms-transform: rotateY(0); }
   to { ms-transform: rotateY(360deg); }
}
@keyframes spin {
   from { transform: rotateY(0); }
   to { transform: rotateY(360deg); }
}
@-webkit-keyframes spin-vertical {
   from { -webkit-transform: rotateX(0); }
   to { -webkit-transform: rotateX(-360deg); }
}
@-ms-keyframes spin-vertical {
   from { ms-transform: rotateX(0); }
   to { ms-transform: rotateX(-360deg); }
}
@keyframes spin-vertical {
   from { transform: rotateX(0); }
   to { transform: rotateX(-360deg); }
}
/*************** STANDARD CUBE ***************/
.cube-wrap {
   -webkit-perspective: 800px;
   -webkit-perspective-origin: 50% 100px;
   -moz-perspective: 800px;
   -moz-perspective-origin: 50% 100px;
   -ms-perspective: 800px;
   -ms-perspective-origin: 50% 100px;
   perspective: 800px;
   perspective-origin: 50% 100px;
}
.cube {
   position: relative;
   width: 200px;
   margin: 0 auto;
   -webkit-transform-style: preserve-3d;
   -webkit-animation: spin 5s infinite linear;
   -moz-transform-style: preserve-3d;
   -moz-animation: spin 5s infinite linear;
   -ms-transform-style: preserve-3d;
   -ms-animation: spin 5s infinite linear;
   transform-style: preserve-3d;
   animation: spin 5s infinite linear;
}
.cube div {
   position: absolute;
   width: 200px;
   height: 200px;
   background: rgba(255,255,255,0.1);
   box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
   font-size: 20px;
   text-align: center;
   line-height: 200px;
   color: rgba(0,0,0,0.5);
   font-family: sans-serif;
   text-transform: uppercase;
}
/*************** DEPTH CUBE ***************/
.depth div.back-pane {
   -webkit-transform: translateZ(-100px) rotateY(180deg);
   -moz-transform: translateZ(-100px) rotateY(180deg);
   -ms-transform: translateZ(-100px) rotateY(180deg);
   transform: translateZ(-100px) rotateY(180deg);
}
.depth div.right-pane {
   -webkit-transform:rotateY(-270deg) translateX(100px);
   -webkit-transform-origin: top right;
   -moz-transform:rotateY(-270deg) translateX(100px);
   -moz-transform-origin: top right;
   -ms-transform:rotateY(-270deg) translateX(100px);
   -ms-transform-origin: top right;
   transform:rotateY(-270deg) translateX(100px);
   transform-origin: top right;
}
.depth div.left-pane {
   -webkit-transform:rotateY(270deg) translateX(-100px);
   -webkit-transform-origin: center left;
   -moz-transform:rotateY(270deg) translateX(-100px);
   -moz-transform-origin: center left;
   -ms-transform:rotateY(270deg) translateX(-100px);
   -ms-transform-origin: center left;
   transform:rotateY(270deg) translateX(-100px);
   transform-origin: center left;
}
.depth div.top-pane {
   -webkit-transform:rotateX(-90deg) translateY(-100px);
   -webkit-transform-origin: top center;
   -moz-transform:rotateX(-90deg) translateY(-100px);
   -moz-transform-origin: top center;
   -ms-transform:rotateX(-90deg) translateY(-100px);
   -ms-transform-origin: top center;
   transform:rotateX(-90deg) translateY(-100px);
   transform-origin: top center;
}
.depth div.bottom-pane {
   -webkit-transform:rotateX(90deg) translateY(100px);
   -webkit-transform-origin: bottom center;
   -moz-transform:rotateX(90deg) translateY(100px);
   -moz-transform-origin: bottom center;
   -ms-transform:rotateX(90deg) translateY(100px);
   -ms-transform-origin: bottom center;
   transform:rotateX(90deg) translateY(100px);
   transform-origin: bottom center;
}
.depth div.front-pane {
   -webkit-transform: translateZ(100px);
   -moz-transform: translateZ(100px);
   -ms-transform: translateZ(100px);
   transform: translateZ(100px);
}
/*************** VERTICAL SPINNING CUBE ***************/



}</style>
       <div style="height: 300px; margin-top: 45px; float:left; width:400px;">
      <div class="cube-wrap">
      <div class="cube depth">
      <div class="front-pane"><img src="https://pic.imgdb.cn/item/64a13c3c1ddac507ccdac0de.gif" width="200" height="200" alt=""/></div>
      <div class="back-pane"><img src="https://pic.imgdb.cn/item/64a13bf71ddac507ccda5c92.gif" width="200" height="200" alt=""/></div>
      <div class="top-pane">上</div>
      <div class="bottom-pane">bottom</div>
      <div class="left-pane"><img src="https://pic.imgdb.cn/item/64a13be01ddac507ccda397e.gif" width="200" height="200" alt=""/></div>
      <div class="right-pane"><img src="https://pic.imgdb.cn/item/64a13f4b1ddac507cce157e9.jpg" width="200" height="200" alt=""/></div>
      </div>
       </div>


</div>
</body>
</html>

红影 发表于 2023-7-2 18:19

不错啊，转得挺好的{:4_187:}

小文 发表于 2023-7-2 18:41

红影 发表于 2023-7-2 18:19
不错啊，转得挺好的

恩师，晚上好！

醉美水芙蓉 发表于 2023-7-2 18:55

梦缘 发表于 2023-7-2 19:24

问好老师，欣赏精彩分享，点赞！{:4_187:}

红影 发表于 2023-7-2 19:30

小文 发表于 2023-7-2 18:41
恩师，晚上好！

问好小文，晚上好{:4_187:}

马黑黑 发表于 2023-7-2 19:55

{:4_199:}

千羽 发表于 2023-7-2 20:42

很好看的魔方{:4_187:}

樵歌 发表于 2023-7-2 20:47

{:4_431:}
页: [1]
查看完整版本: 试试套用别人做的翻转转不转