关于CSS3的3D立方体动画

知识点：

　　1、每个元素有独立的坐标系

　　2、坐标系随当前元素的改变而发生改变

　　3、立方体由静态transform参数构成

　　4、通过给容器添加动画使立方体运动

效果图：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

        .container{perspective:1200px; perspective-origin:50% 50% 200px;}

        .box{width:300px; height:300px; position:relative; transform-style:preserve-3d; border:1px gray solid; margin:50px auto; animation:goto 10s linear infinite; -webkit-animation:goto 10s linear infinite;}

        .page{width:200px; height:200px; opacity:1; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}

        .page:nth-of-type(1){background-color:rgb(30,139,180); transform:rotateX(-90deg) translateZ(-100px);}

        .page:nth-of-type(2){background-color:rgb(125,163,23); transform:rotateX(90deg) translateZ(-100px);}

        .page:nth-of-type(3){background-color:rgb(208,165,37); transform:rotateY(-90deg) translateZ(-100px);}

        .page:nth-of-type(4){background-color:rgb(175,30,131); transform:rotateY(90deg) translateZ(-100px);}

        .page:nth-of-type(5){background-color:rgb(200,108,31); transform:translateZ(100px);}

        .page:nth-of-type(6){background-color:rgb(28,28,28); transform:translateZ(-100px);}

        @keyframes goto{

            0% {

                transform: rotateX(0deg) rotateY(0deg);

                -webkit-transform: rotateX(0deg) rotateY(0deg);

            }

            10% {

                transform: rotateX(0deg) rotateY(180deg);

                -webkit-transform: rotateX(0deg) rotateY(180deg);

            }

            20% {

                transform: rotateX(-180deg) rotateY(180deg);

                -webkit-transform: rotateX(-180deg) rotateY(180deg);

            }

            30% {

                transform: rotateX(-360deg) rotateY(180deg);

                -webkit-transform: rotateX(-360deg) rotateY(180deg);

            }

            40% {

                transform: rotateX(-360deg) rotateY(360deg);

                -webkit-transform: rotateX(-360deg) rotateY(360deg);

            }

            50% {

                transform: rotateX(-180deg) rotateY(360deg);

                -webkit-transform: rotateX(-180deg) rotateY(360deg);

            }

            60% {

                transform: rotateX(90deg) rotateY(180deg);

                -webkit-transform: rotateX(90deg) rotateY(180deg);

            }

            70% {

                transform: rotateX(0) rotateY(180deg);

                -webkit-transform: rotateX(0) rotateY(180deg);

            }

            80% {

                transform: rotateX(90deg) rotateY(90deg);

                -webkit-transform: rotateX(90deg) rotateY(90deg);

            }

            90% {

                transform: rotateX(90deg) rotateY(0);

                -webkit-transform: rotateX(90deg) rotateY(0);

            }

            100% {

                transform: rotateX(0) rotateY(0);

                -webkit-transform: rotateX(0) rotateY(0);

            }

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="box">

            <div class="page"></div>

            <div class="page"></div>

            <div class="page"></div>

            <div class="page"></div>

            <div class="page"></div>

            <div class="page"></div>

        </div>

    </div>

</body>

</html>

【CSS3】3D立方体动画的更多相关文章

  1. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

  2. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  3. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

  4. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

  5. css3 3d旋转动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Css3 3D 旋转动画效果

    需求: 1.一个列表滑动效果为360 旋转 准备: 1.css 基础 2.Css 动画基础animation 3.transform-style概念 4 transform 概念 5 JavaScri ...

  7. CSS3 3D旋转动画代码实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. CSS3 3D立方体效果

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  9. CSS3 3D旋转动画菜单

    在线演示 本地下载

随机推荐

  1. C++ Socket 获取本机可用端口号（QT）

    :加载套接字库,创建套接字(WSAStartup()/socket()): :绑定套接字到一个IP地址和一个端口上(bind()): :将套接字设置为监听模式等待连接请求(listen()): :请求 ...

  2. VisualVM介绍使用

    1    打开VisualVM(这个工具放在JDK安装目录的bin目录下,双击jvisualvm.exe即可打开),如下图所示 以VisualVM自身为例,VisualVM本身也是一个java程序,当 ...

  3. 【巨人的步伐以及人类的进击】BSGS algorithm

    原问题 求ax≡b(mod p)的最小正整数解. 解法 实际上是以空间换取时间的算法. 先用散列表把 ai (i∈[0,p√)) 都储存起来. 然后再从小到大枚举 j (j∈[0,p√)) ,在散列表 ...

  4. 【JZOJ4793】【GDOI2017模拟9.21】妮厨的愤怒

    题目描述 栋栋和标标都是厨力++的妮厨.俗话说"一机房不容二厨",他们两个都加入了某OI( )交流♂( )群,在钦定老婆的时候出现了偏差,于是闹得不可开交.可是栋栋是群内的长者,斗 ...

  5. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 全书总结

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 全书总结 本系列文章中可能有很多翻译有问题或者错误的地方:并且有些章节 ...

  6. 微信公众号系统在Linux下的部署操作

    ps -ef | grep tomcat 查看tomcat进程

  7. 「WC2018」即时战略

    「WC2018」即时战略 考虑对于一条链:直接随便找点,然后不断问即可. 对于一个二叉树,树高logn,直接随便找点,然后不断问即可. 正解: 先随便找到一个点,问出到1的路径 然后找别的点,考虑问出 ...

  8. 【JZOJ4893】【NOIP2016提高A组集训第15场11.14】过河

    题目描述 数据范围 解法 由于同一个点,同一个圆盘最多只会走一次. 把(i,j)当作一个点,表示第i个点,放第i个圆盘. 那么就可以使用最短路. 时间复杂度为O(n4∗k). 事实上存在冗余圆盘,一个 ...

  9. python 不定长参数*args

  10. UVA_401:Palindromes

    AC:Time(29ms)     C++ 4.8.2 #include<stdio.h> #include<string.h> char * mirstr = "A ...