关于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. golang context用法详解

    背景 在go服务器中,对于每个请求的request都是在单独的goroutine中进行的,处理一个request也可能设计多个goroutine之间的交互, 使用context可以使开发者方便的在这些 ...

  2. NFS服务器搭建与配置

    原文:https://blog.csdn.net/qq_38265137/article/details/83146421 NFS服务简介什么是NFS?NFS就是Network File System ...

  3. python编写购物车小程序

     #练习#程序购物车#启动程序后,让用户输入工资,  然后打印商品列表,允许用户根据商品编号购买商品用户选择商品后 #检测余额是否够,够就直接扣款,不够就提醒可随时退出,退出时,打印已购买商品和余额  ...

  4. Mac上homebrew使用

    一.官方网址 Homebrew 二.目录 安装 查看帮助信息 查看版本 更新Homebrew自己 安装软件包 查询可更新的包 更新包 (formula) 清理旧版本 锁定不想更新的包 卸载安装包 查看 ...

  5. nginx配置静态资源压缩

    sendfile on; #让nginx在传输文件时直接在磁盘和tcp socket之间传输数据 location ~ .*\.(txt|xml)$ { gzip on; #开启压缩 gzip_htt ...

  6. navgator 用于浏览器检测

  7. onethink二级导航调用

    <ul class="nav-main">//添加tree参数 <think:nav name="nav" tree="true&q ...

  8. matplotlib常用操作

    1.根据坐标点绘制: import numpy as np import matplotlib.pyplot as plt x = np.array([1,2,3,4,5,6,7,8]) y = np ...

  9. vscode中编译输出c++是乱码

    vscode中编译输出c++是乱码的解决 环境说明:windows下面运行vscode win + R 右键属性 查看当前编码状态 知道当前环境的编码格式后,可以改变vscode上c++的格式 点击v ...

  10. MAC+VS Code+Python+Markdown调试配置

    目录 VS Code官网下载 VS Code插件推荐 VS Code Python环境配置 Markdown配置 VS Code官方文档 VS Code官网下载 VS Code官网下载地址 VS Co ...