CSS3正方体旋转示例代码

前端技术 2023/09/01 CSS
效果图：
 
css代码：

复制代码
代码如下:

@keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(-360deg); }}
@keyframes spin-vertical {from { transform: rotateX(0); }to { transform: rotateX(360deg); }}
/*************** 水平立方体 ***************/
.cube-wrap {perspective: 800px;perspective-origin: 50% 100px;float:left;margin:150px 0 0 200px;}
.cube {position: relative;width: 200px;-moz-transform-style: preserve-3d;-moz-animation: spin 20s 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);text-align: center;line-height: 200px;font-weight:bold;text-shadow:-1px 1px 5px #f60;color:#fff;font-family: sans-serif;text-transform: uppercase;font-size:30px;}
.depth div.back-pane {transform: translateZ(-100px) rotateY(180deg);}
.depth div.right-pane {transform:rotateY(-270deg) translateX(100px);transform-origin: top right;}
.depth div.left-pane {transform:rotateY(270deg) translateX(-100px);transform-origin: center left;}
.depth div.top-pane {transform:rotateX(-90deg) translateY(-100px);transform-origin: top center;}
.depth div.bottom-pane {transform:rotateX(90deg) translateY(100px);transform-origin: bottom center;}
.depth div.front-pane {transform: translateZ(100px);}
/*************** 垂直旋转的立方体 ***************/
.cube-wrap.vertical .cube {transform-origin: 0 100px;animation: spin-vertical 5s infinite linear;}
.cube-wrap.vertical .depth div.top-pane {transform:rotateX(-270deg) translateY(-100px);}
.cube-wrap.vertical .depth div.back-pane {transform: translateZ(-100px) rotateX(180deg);}
.cube-wrap.vertical .depth div.bottom-pane {transform: rotateX(-90deg) translateY(100px);}
/*************** 平面旋转的立方体 ***************/
.cube-wrap.flat {perspective: none;perspective-origin: 0 0;}


html代码：

复制代码
代码如下:

<div class=\"cube-wrap\">
<div class=\"cube depth\">
<div class=\"front-pane\">front</div>
<div class=\"back-pane\">back</div>
<div class=\"top-pane\">top</div>
<div class=\"bottom-pane\">bottom</div>
<div class=\"left-pane\">left</div>
<div class=\"right-pane\">right</div>
</div>
</div>
<div class=\"cube-wrap vertical\">
<div class=\"cube depth\">
<div class=\"front-pane\">front</div>
<div class=\"back-pane\">back</div>
<div class=\"top-pane\">top</div>
<div class=\"bottom-pane\">bottom</div>
<div class=\"left-pane\">left</div>
<div class=\"right-pane\">right</div>
</div>
</div>
<div class=\"cube-wrap flat\">
<div class=\"cube depth\">
<div class=\"front-pane\">front</div>
<div class=\"back-pane\">back</div>
<div class=\"top-pane\">top</div>
<div class=\"bottom-pane\">bottom</div>
<div class=\"left-pane\">left</div>
<div class=\"right-pane\">right</div>
</div>
</div>

本文地址：https://www.stayed.cn/item/1940

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案