立方体：父盒子规定了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. nyoj_214_单调递增子序列(二)_201403182131

    单调递增子序列(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 给定一整型数列{a1,a2...,an}(0<n<=100000),找出单调递增最长 ...

  2. kendo中需要kendo.default.min.css

    kendo中需要kendo.default.min.css,这个默认是没有加入头文件的,还是需要手动加入一下 <link href="~/Scripts/kendo/styles/ke ...

  3. RabbitMQ消息队列阻塞导致服务器宕机

    最近工作中存储服务器由于压力太大无法及时消费消息.这个过程中,导致RabbitMQ意外挂掉,无法访问.下面是部分问题分析过程. 麒麟系统服务器分析 1.服务器异常信息: [root@localhost ...

  4. P1516 青蛙的约会 洛谷

    https://www.luogu.org/problem/show?pid=1516 题目描述 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上, ...

  5. jconsole远程连接 jmx配置注意事项

    由于在测试程序时需要收集程序运行时的内存,CPU等消耗情况.选择了jconsole这个jdk自带工具来观察.为了不影响程序运行状态,用远程连接的方式来具体观察. 首先,程序是放在ubutun系统服务器 ...

  6. sqlalchemy foreign key查询和backref

    首先在mysql中创建两个表如下: mysql) , primary key(id)); Query OK, rows affected (0.01 sec) mysql),user_id int, ...

  7. URAL 1822. Hugo II&#39;s War 树的结构+二分

    1822. Hugo II's War Time limit: 0.5 second Memory limit: 64 MB The glorious King Hugo II has declare ...

  8. HDU 5323 SOLVE THIS INTERESTING PROBLEM 爆搜

    pid=5323" target="_blank" style="">链接 Solve this interesting problem Tim ...

  9. C# LIstbox 解决WinForm下ListBox控件“设置DataSource属性后无法修改项集合”的问题

    解决WinForm下ListBox控件“设置DataSource属性后无法修改项集合”的问题 分类: winform2008-05-24 02:33 2592人阅读 评论(11) 收藏 举报 winf ...

  10. iframe高度100%，自适应高度

    声明:有更好的方法在下一篇内容中 100% http://www.360doc.com/content/11/1102/15/55892_161105115.shtml iframe自适应高度 转自: ...