HTML5 CSS3 诱人的实例 3D立方体旋转动画

最新推荐文章于 2022-05-31 18:20:24 发布

傻傻的装高智商

最新推荐文章于 2022-05-31 18:20:24 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/sdfwcc/article/details/84141529

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/34120047

创意来自：http://www.html5tricks.com/demo/html5-3d-cube/index.html ，同学给我发的例子，感觉很不错，不过实在想不出来实际的用处，但是效果很炫~

效果图：

知识点：

1、perspective ，transform 的复习

2、css3 backgroud实现格格背景，即面上的小格格

3、 @-webkit-keyframes 实现动画

HTML：

<body><div class="stage">    <div class="cube">        <div class="font"></div>        <div class="back"></div>        <div class="left"></div>        <div class="right"></div>        <div class="top"></div>        <div class="bottom"></div>    </div></div></body>

前面的3D商品展示中已经说过如何制作正方体，并且那个上面还有数字，理论上说比这个复杂，虽然木有这个炫~这里就不多说了。

CSS：

 html        {            background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);            background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);            height: 100%;        }        .stage        {            -webkit-perspective: 1000px;            width: 20em;            height: 20em;            left: 50%;            top: 50%;            margin-left: -10em;            margin-top: -10em;            position: absolute;        }        .cube        {            position: absolute;            width: 100%;            height: 100%;            -webkit-transform-style: preserve-3d;            -webkit-transform: rotateX(-20deg) rotateY(-20deg);        }        .cube *        {            background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);            -webkit-background-size: 2.5em 2.5em;            background-color: rgba(0, 0, 0, 0.5);            position: absolute;            width: 100%;            height: 100%;            border: 2px solid rgba(54, 226, 248, 0.5);            -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);        }        .font        {            -webkit-transform: translateZ(10em);        }        .back        {            -webkit-transform: rotateX(180deg) translateZ(10em);        }        .left        {            -webkit-transform: rotateY(-90deg) translateZ(10em);        }        .right