立方体：父盒子规定了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. [bzoj 1042][HAOI2008]硬币购物（用容斥原理弄背包）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1042 分析: 解法很巧妙,用f[i]表示四种硬币A.B.C.D的数量不考虑的情况下弄成 ...

  2. css3 transform对其他样式影响,(尤其是position:flixed)

    1.transform 会为当前元素添加 position : relative 特性: 当 magin 为负值的时候,就会覆盖到前面的 元素, 然而如果给前面元素添加了transform 属性后,前 ...

  3. RMAN RECOVERY

    Data Recovery Advisor The health monitor and the ADR The capabilities and limitations of DRA using t ...

  4. ORA-15024: discovered duplicately numbered ASM disk 0

    在尝试删除一个diskgroup的时候遇到这个错误. ORA-15024: discovered duplicately numbered ASM disk 0 这说明oracle认为有两个disk ...

  5. SpriteBuilder&amp;Cocos2D使用CCEffect特效实现天黑天亮过度效果

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;) 在动作或RPG类游戏中我们有时须要天黑和天亮过度的效果来完毕场 ...

  6. NSDate 格式化 及 互转

    /* NSDateFormatter的作用 1.NSString -> NSDate 2.NSDate -> NSString */ void fmt_date_to_string(); ...

  7. 记录 mysql sql limit 0,100问题

    某个场景分页查询出第一页的数据,, limit 0,100  第一页 limit 100,100 第二页 limit 200,100 第三页 select * from user limit 0,10 ...

  8. Android Studio最新配置教程2016

    http://blog.csdn.net/wen_demo 一.Android studio 基本简单介绍 1.Android studio和Eclipse的差别: 1.Studio中有Project ...

  9. java 内存模型 ——学习笔记

    一.Java 内存模型 java内存模型把 Java 虚拟机内部划分为线程栈和堆 下面这张图演示了调用栈和本地变量存放在线程栈上,对象存放在堆上.      ==>>  一个局部变量可能是 ...

  10. css list menu

    选择让page和folder都显示出来