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


Posted in HTML / CSS onDecember 30, 2016

本文介绍了HTML5+CSS3 诱人的实例: 3D立方体旋转动画实例,具体如下

效果图:

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

知识点:

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  
       {  
           -webkit-transform: rotateY(90deg) translateZ(10em);  
       }  
  
       .top  
       {  
           -webkit-transform: rotateX(90deg) translateZ(10em);  
       }  
  
       .bottom  
       {  
           -webkit-transform: rotateX(-90deg) translateZ(10em);  
       }

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

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

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;

背景设置,从左到右的3像素的条条,从上到下的3像素的条条;然后设置背景大小为2.5em 2.5em ,然后将背景重复显示,效果如下(我添加了边框):

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

现在的完整效果:

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

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

定义一个动画帧:

@-webkit-keyframes spin  
       {  
           from  
           {  
               -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);  
               transform: translateZ(-10em) rotateX(0) rotateY(0deg);  
           }  
  
           to  
           {  
               -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);  
               transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);  
           }  
       }

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

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

.cube  
      {  
          -webkit-animation: 6s spin linear infinite;  
          position: absolute;  
          width: 100%;  
          height: 100%;  
          -webkit-transform-style: preserve-3d;  
          -webkit-transform: rotateX(-20deg) rotateY(-20deg);  
      }

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

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

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

对于原网站的样子,有点细微的差别:

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

.cube *:before  
    {  
        display: block;  
        background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);  
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);  
        content: '';  
        height: 100%;  
        width: 100%;  
        position: absolute;  
    }

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

源码点击下载:demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 #HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 #HTML / CSS
详解CSS3浏览器兼容
Dec 14 #HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 #HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 #HTML / CSS
Css3新特性应用之形状总结
Dec 08 #HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 #HTML / CSS
You might like
PHP实现加强版加密解密类实例
2015/07/29 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
php实现登录页面的简单实例
2019/09/29 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
详解vue 命名视图
2019/08/14 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
电气工程师岗位职责
2014/01/01 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
护理实习生带教计划
2015/01/16 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
营业员岗位职责范本
2015/04/14 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python