如何用CSS3+HTML5绘制一个3x3的3D魔方？

来源：互联网发布：cd软件是什么意思编辑：程序博客网时间：2024/04/29 16:08

CSS3真的很强大，不仅能实现动画，还能绘制2D、3D图形。主流浏览器FIrefox、Chrome、Opera、Safari都能支持，遗憾的是市场占有率仍然很高的IE浏览器却无法支持。具体可查看CSS3参考手册点击打开链接

模仿做了一个简单的3D魔方，给大家分享一下。

效果如下。

HTML代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Margic Cube</title>    <link  rel="stylesheet" type="text/css" href="margic-cube.css"></head><body><div id="outerContainer"><div id="container">   <div class="one">       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>   </div>   <div class="two">       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>   </div>   <div class="three">       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>   </div>   <div class="four">       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>   </div>   <div class="five">       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>   </div>   <div class="six">       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>       <div class="min_cube"></div>   </div></div></div></body></html>

CSS3代码：

* {    margin: 0;    padding:0;}#outerContainer{    position: absolute;    top: 300px;    left: 300px;    width: 200px;    height: 200px;    -webkit-transform-style: preserve-3d;    transform-style: preserve-3d;    transform-origin: 50% 50%;  /*50% 50%是相对于width和height的，如果不设置width和height则transform-origin不起作用*/    backface-visibility: hidden;    -webkit-animation: animations 4s ease-in-out 0.1s infinite;    -moz-animation: animations 4s ease-in-out 0.1s infinite;    -o-animation: animations 4s ease-in-out 0.1s infinite;    animation: animations 4s ease-in-out 0.1s infinite;}@-webkit-keyframes animations {    0%{-webkit-transform:rotateZ(270deg); }    25%{-webkit-transform:rotateY(180deg); }    50%{-webkit-transform:rotateZ(-270deg);}    75%{-webkit-transform:rotateY(-180deg);}}@-moz-keyframes animations {    0%{-moz-transform:rotateZ(270deg); }    25%{-moz-transform:rotateY(180deg); }    50%{-moz-transform:rotateZ(-270deg);}    75%{-moz-transform:rotateY(-180deg);}}@-o-keyframes animations {    0%{-o-transform:rotateZ(270deg); }    25%{-o-transform:rotateY(180deg); }    50%{-o-transform:rotateZ(-270deg);}    75%{-o-transform:rotateY(-180deg);}}@keyframes animations {    0%{transform:rotateZ(270deg); }    25%{transform:rotateY(180deg); }    50%{transform:rotateZ(-270deg);}    75%{transform:rotateY(-180deg);}}#container {    -webkit-transform-style: preserve-3d;    transform-style: preserve-3d;    backface-visibility: hidden;}#container>div {    position: absolute;    top: 0;    width: 198px;    height: 198px;    border: 1px solid darkgray; /*边缘的边框总宽度为2px*/}.one{    background-color: blue;    -webkit-transform: translateZ(100px);    transform: translateZ(100px);}.two{    background-color: white;    -webkit-transform: rotateX(90deg) translateZ(100px);    transform: rotateX(90deg) translateZ(100px);}.three{    background-color: yellow;    -webkit-transform: rotateX(90deg) translateZ(-100px);    transform: rotateX(90deg) translateZ(-100px);}.four{    background-color: orange;    -webkit-transform: rotateY(90deg) translateZ(-100px);    -moz-transform: rotateY(90deg) translateZ(-100px);    -ms-transform: rotateY(90deg) translateZ(-100px);    -o-transform: rotateY(90deg) translateZ(-100px);    transform: rotateY(90deg) translateZ(-100px);}.five{    background-color: red;    -webkit-transform: rotateY(90deg) translateZ(100px);    transform: rotateY(90deg) translateZ(100px);}.six{    background-color: green;    -webkit-transform: translateZ(-100px);    transform: translateZ(-100px);}.min_cube{    width: 64px;    height: 64px;    float: left;    border: 1px solid darkgray; /*中间的边框总宽度为2px*/}

1 0