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

最新推荐文章于 2024-05-15 02:23:26 发布

莫修

最新推荐文章于 2024-05-15 02:23:26 发布

阅读量6.9k

点赞数 4

分类专栏： CSS3 文章标签： CSS3 -3D HTML5 魔方

本文链接：https://blog.csdn.net/luojiandecsdn/article/details/50554291

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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*/
}

莫修

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
如何用CSS3+HTML5绘制一个3x3的3D魔方？

CSS3真的很强大，不仅能实现动画，还能绘制2D、3D图形。主流浏览器FIrefox、Chrome、Opera、Safari都能支持，遗憾的是市场占有率仍然很高的IE浏览器却无法支持。具体可查看CSS3参考手册点击打开链接模仿做了一个简单的3D魔方，给大家分享一下。HTML代码： Margic Cube
复制链接

扫一扫