关于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. 一位AI研究员+区块链创业者的终极展望：AI DAO将统治世界

    一位AI研究员+区块链创业者的终极展望:AI DAO将统治世界 [日期:2017-01-09] 来源:infoq.com  作者:杨赛 [字体:大 中 小] Trent McConaghy是一位资深的 ...

  2. jstree设置checkbox单选

    jstree设置插件checkbox只允许单选 jstree version console.log($.jstree.version); 3.3.8 单选配置参数: $.jstree.default ...

  3. day39-Spring 03-JDK的动态代理

    package cn.itcast.spring3; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Meth ...

  4. PHPCMS快速建站系列之需要掌握的函数

    路径:phpcms\libs\classes\model.class.php /**   * 执行sql查询   * @param $where   查询条件[例`name`='$name']   * ...

  5. JavaScript--tab栏切换效果

    tab栏切换效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  6. 发布网站时 遇到XX类型 同时存在XX.dll和XX.dll中

    遇到该问题的可能如下: 1.复制了页面 更改了名字 可是对应的一些地方没有注意 <%@ Page Language="C#" AutoEventWireup="tr ...

  7. navicat 导入SQL文件出错

    1.新建数据库 在数据库名或者表名上右键  运行SQL语句 2.去掉对勾 F5刷新则可以发现导入的表.

  8. TIJ——Chapter Thirteen:Strings

    String 对象是不可修改的,对于被String 重载的'+' 和'+=' 运算符来说,当你用它们来连接两个String 对象的时候,它在底层并不会对于每一次连接均生成一个String 对象,取而代 ...

  9. centos安装php7.18注意

    报错–php53-common conflicts with php-common //解决 yum -y install php* --skip-broken 第一步:安装源 yum install ...

  10. Myeclipse jdk的安装