关于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. Java IO：为什么InputStream只能读一次

    http://zhangbo-peipei-163-com.iteye.com/blog/2021879 InputStream的接口规范就是这么设计的. /** * Reads the next b ...

  2. CTSC2016时空旅行

    当时看这道题AC的人数比较多,就开了这道题. 很容易发现是这是一个有关凸包的题. 然后不知道怎么维护凸包,一直在想cdq,感觉复杂度不行,于是被这玩意难住了…… 幸好有亲学长yyh造福人类的题解:ht ...

  3. NYoj 155最短路

    //dij #include<stdio.h> #include<string.h> #include<queue> using namespace std; #d ...

  4. Windows系统MySQL8.0的安装教程

    MySQL推出的8.0版本亮点多多,尤其是两倍的提速更让我们迫不及待地安装一睹为快.然而目前我们所用的版本还在5.7之前,今天小编给家分享一下MySQL8.0的安装,尤其是多版本MySQL的共存. 方 ...

  5. ENSP 安装后，启动路由器提示错误41

    ENSP 安装后,启动路由器提示错误41 环境: 安装的软件清单: VirtualBox-5.2.28-130011-Win.exe WinPcap_4_1_3.exe Wireshark-x64-3 ...

  6. CentOS下重启uwsgi

    使用Django开发项目,每次修改内容无法刷新,重启nginx也无效,每次都重启主机, 网上搜索很多资料,发现可以重启uwsgi来解决问题,但是发现uwsgi重启每个人都不一样,很多人写了脚本重启 我 ...

  7. jquery find 推荐

    https://codeplayer.vip/p/j7soa 这篇写的还是不错的,备用. // 返回jQuery对象所有匹配元素的标识信息数组 // 每个元素形如:tagName或tagName#id ...

  8. 安装LoadRunner11时，缺少vc2005_sp1_with_atl_fix_redist错误的解决方案

    安装LoadRunner11时,会报缺少vc2005_sp1_with_atl_fix_redist错误,类似下图所示: 由提示信息可知,这里是由于本机缺少该组件所致,解决方案就是安装此组件,可以去网 ...

  9. day40-Spring 01-上次课内容回顾

  10. ubuntu 代理配置

    1.安装Python 2.安装shadowsocks客户端 sudo pip install shadowsocks 3.配置shadowsocks客户端配置 vim /etc/shadowsocks ...