首页 > 代码库 > HTML5 CSS3 诱人的实例： 3D立方体旋转动画

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

2024-07-29 15:45:40   225人阅读

效果图：


知识点：

1、perspective ，transform 的复习

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

3、 @-webkit-keyframes 实现动画


HTML：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <body>  
  2.   
  3.   
  4. <div class="stage">  
  5.     <div class="cube">  
  6.         <div class="font"></div>  
  7.         <div class="back"></div>  
  8.         <div class="left"></div>  
  9.         <div class="right"></div>  
  10.         <div class="top"></div>  
  11.         <div class="bottom"></div>  
  12.     </div>  
  13.   
  14. </div>  
  15.   
  16.   
  17. </body>  


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

CSS：

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. html  
  2.        {  
  3.            background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);  
  4.            background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);  
  5.            height: 100%;  
  6.        }  
  7.   
  8.        .stage  
  9.        {  
  10.            -webkit-perspective: 1000px;  
  11.            width: 20em;  
  12.            height: 20em;  
  13.            left: 50%;  
  14.            top: 50%;  
  15.            margin-left: -10em;  
  16.            margin-top: -10em;  
  17.            position: absolute;  
  18.        }  
  19.   
  20.        .cube  
  21.        {  
  22.            position: absolute;  
  23.            width: 100%;  
  24.            height: 100%;  
  25.            -webkit-transform-style: preserve-3d;  
  26.            -webkit-transform: rotateX(-20deg) rotateY(-20deg);  
  27.        }  
  28.   
  29.        .cube *  
  30.        {  
  31.            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);  
  32.            -webkit-background-size: 2.5em 2.5em;  
  33.   
  34.            background-color: rgba(0, 0, 0, 0.5);  
  35.            position: absolute;  
  36.            width: 100%;  
  37.            height: 100%;  
  38.            border: 2px solid rgba(54, 226, 248, 0.5);  
  39.            -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);  
  40.   
  41.        }  
  42.   
  43.        .font  
  44.        {  
  45.            -webkit-transform: translateZ(10em);  
  46.        }  
  47.   
  48.        .back  
  49.        {  
  50.            -webkit-transform: rotateX(180deg) translateZ(10em);  
  51.        }  
  52.   
  53.        .left  
  54.        {  
  55.            -webkit-transform: rotateY(-90deg) translateZ(10em);  
  56.        }  
  57.   
  58.        .right  
  59.        {  
  60.            -webkit-transform: rotateY(90deg) translateZ(10em);  
  61.        }  
  62.   
  63.        .top  
  64.        {  
  65.            -webkit-transform: rotateX(90deg) translateZ(10em);  
  66.        }  
  67.   
  68.        .bottom  
  69.        {  
  70.            -webkit-transform: rotateX(-90deg) translateZ(10em);  
  71.        }  


同样：stage作为舞台，cube设置子元素的效果为3d，然后每个面都进行旋转和设置translateZ然后形成立方体。

为每个面设置backgroud设置小格格的代码：

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. background: -webkit-linear-gradient(  
  2.            left,  
  3.            rgba(54, 226, 248, 0.5) 0px,  
  4.            rgba(54, 226, 248, 0.5) 3px,  
  5.            rgba(0, 0, 0, 0) 0px),  
  6.                    -webkit-linear-gradient(  
  7.            top,  
  8.            rgba(54, 226, 248, 0.5) 0px,  
  9.            rgba(54, 226, 248, 0.5) 3px,  
  10.            rgba(0, 0, 0, 0) 0px);  
  11.   
  12.        -webkit-background-size: 2.5em 2.5em;  

 

背景设置，从左到右的3像素的条条，从上到下的3像素的条条；然后设置背景大小为2.5em 2.5em ，然后将背景重复显示，效果如下（我添加了边框）：



现在的完整效果：


可以看到立方体已经成型了，最后添加上动画就行了，不要觉得动画很复杂，其实很简单~

定义一个动画帧：

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. @-webkit-keyframes spin  
  2.        {  
  3.            from  
  4.            {  
  5.                -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);  
  6.                transform: translateZ(-10em) rotateX(0) rotateY(0deg);  
  7.            }  
  8.   
  9.            to  
  10.            {  
  11.                -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);  
  12.                transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);  
  13.            }  
  14.        }  


名字为spin，开始时 translateZ(-10em) rotateX(0) rotateY(0deg); 结束时 ： translateZ(-10em) rotateX(360deg) rotateY(360deg); 即同时绕着x,y轴360度旋转。

最后给我们的立方体加上此animation属性：

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. .cube  
  2.       {  
  3.           -webkit-animation: 6s spin linear infinite;  
  4.           position: absolute;  
  5.           width: 100%;  
  6.           height: 100%;  
  7.           -webkit-transform-style: preserve-3d;  
  8.           -webkit-transform: rotateX(-20deg) rotateY(-20deg);  
  9.       }  


设置时间为动画时间 6s , 动画 spin , 速度为匀速linear , 无限循环 infinite ； 

关于更加细致的参数设置，可以参考w3cSchool~以后我也会写单独介绍CSS3的属性的博客~



好了，最终的效果就已经完成了~

对于原网站的样子，有点细微的差别：

因为它额外给每个面添加了一个径向渐变，那么我们添加上：

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. .cube *:before  
  2.     {  
  3.         display: block;  
  4.         background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);  
  5.         background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);  
  6.         content: ‘‘;  
  7.         height: 100%;  
  8.         width: 100%;  
  9.         position: absolute;  


利用before这个伪元素，然后设置径向渐变~~现在终于一致了~

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


联系
我们