立方体：父盒子规定了3d呈现属性，立方体做旋转运动

移动顺序：1、每个盒子都先移动100px，然后再做相应的旋转  2、只有这样立方体的几何中心点与父盒子的几何中心点是一样的

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .square {

            width: 200px;

            height: 200px;

            margin: 150px auto;

            border: 1px solid #000;

            border-radius: 50%;

            position: relative;

            transform-style: preserve-3d;

            text-align: center;

            font: 500 40px/200px "Microsoft YaHei UI";

            /*transform: rotateX(-16deg) rotateY(17deg);*/

            animation: gun 3s infinite linear;

        }

        .square > div {

            width: 100%;

            height: 100%;

            position: absolute;

            top: 0;

            left: 0;

            opacity: 0.6;

            /*border: 1px solid #fff;*/

        }

        .front {

            background-color: orange;

            transform: translateZ(100px);

        }

        .back {

            background-color: green;

            transform: translateZ(-100px) rotateY(180deg);

        }

        .left {

            background-color: blue;

            transform: translateX(-100px) rotateY(-90deg);

        }

        .right {

            background-color: silver;

            transform: translateX(100px) rotateY(90deg);

        }

        .top {

            background-color: yellow;

            transform: translateY(-100px) rotateX(90deg);

        }

        .bottom {

            background-color: yellow;

            transform: translateY(100px) rotateX(-90deg);

        }

        @keyframes gun {

            0% {

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

            }

            100% {

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

            }

        }

    </style>

</head>

<body>

<!--正方形-->

<div class="square">

    <div class="left">左</div>

    <div class="right">右</div>

    <div class="top">上</div>

    <div class="bottom">下</div>

    <div class="front">前</div>

    <div class="back">后</div>

</div>

</body>

</html>

html5——3D案例（立方体）的更多相关文章

  1. html5——3D案例（立体导航）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. html5——3D案例（立体汉字，旋转导航）

    1.立体汉字:旋转点left,attr(data-cont)可获取自定义属性值,skewY(倾斜转换)参考地址 2.旋转导航:先移动后旋转,li标签需要延迟执行旋转 注意::hover事件触发自己的: ...

  3. html5——3D案例（音乐盒子、百度钱包）

    1.音乐盒子:触碰盒子,盖子会打开 2.百度钱包:触碰钱包,钱包,会180度旋转 <!DOCTYPE html> <html lang="en"> < ...

  4. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  5. 7款超酷HTML5 3D动画精选应用及源码

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  6. 8款效果惊艳的HTML5 3D动画

    1.HTML5 WebGL水面水波荡漾特效 之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错.今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大 ...

  7. 超给力的HTML5 3D动画欣赏及源码下载

    HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...

  8. 无插件纯Web HTML5 3D机房 进阶篇（新增设备、线缆、巡查等功能）

    前情提要 前阵子写了一篇无插件纯Web 3D机房,介绍了如何用html5在网页上创建无插件的精美3d机房场景.这两个月以来,陆续收到很多朋友的鼓(膝)励(盖),受宠若惊之余,对索要源代码的朋友都已经尽 ...

  9. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. 一文教你用 Neo4j 快速构建明星关系图谱

    更多有趣项目及代码见于:DesertsX/gulius-projects 前言 本文将带你用 neo4j 快速实现一个明星关系图谱,因为拖延的缘故,正好赶上又一年的4月1日,于是将文中的几个例子顺势改 ...

  2. [poj2311]Cutting Game_博弈论

    Cutting Game poj-2311 题目大意:题目链接 注释:略. 想法: 我们发现一次操作就是将这个ICG对应游戏图上的一枚棋子变成两枚. 又因为SG定理的存在,记忆化搜索即可. 最后,附上 ...

  3. [转] python 获取本机ip地址的两种实现方法

    #!/usr/bin/python import socket import fcntl import struct def get_ip_address(ifname): s = socket.so ...

  4. 1.4－动态路由协议OSPF④

    多区域的OSPF: 划分多区域的主要目的: 1.减少每个区域中的路由条目,进而减少每个路由器的内存中的路由,及其内存消耗,提高转发效率. 2.因为每一个OSPF区域对应在一个OSPF LSDB,配合在 ...

  5. Win7 系统管理员设置了系统策略_禁止进行此安装_怎么办

    系统管理员设置了系统策略,禁止进行此安装,怎么办 最佳答案 尝试方法一:   windows开始菜单,运行里面输入gpedit.msc打开组策略,   在"计算机配置"→管理模板→ ...

  6. __weak与__block区别分析

    API Reference对__block变量修饰符有如下几处解释: //A powerful feature of blocks is that they can modify variables ...

  7. Ubuntu中取消秘钥环

    1.打开应用程序->附件->password和加密密钥(或者在终端中输入 seahorse) 2.切换到password选项卡,会看到一个password密钥环 3.右击->更改pa ...

  8. 解决 C++ 操作 MySQL 大量数据插入效率低下问题

    往 Mysql 中,插入10000条简单数据.速度很缓慢,竟然要5分钟左右, 可是打开事务的话.一秒不到就搞定了 代码: #include <iostream> #include < ...

  9. 【C++】双向线性链表容器的实现

    // 双向线性链表容器 #include <cstring> #include <iostream> #include <stdexcept> using name ...

  10. seq2seq里的数学

    seq2seq模型详解 原创 2017年12月25日 09:41:04 标签: seq2seq / 自然语言 / 机器人   在李纪为博士的毕业论文中提到,基于生成的闲聊机器人中,seq2seq是一种 ...