立方体：父盒子规定了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. [K/3Cloud]屏蔽页签的关闭按钮

    如图,屏蔽企业门户的X关闭按钮. this.View.GetControl<TabControl>("FMainTab").SetItemCloseable(1, fa ...

  2. 选择数字（codevs 3327）

    题目描述 Description 给定一行n个非负整数a[1]..a[n].现在你可以选择其中若干个数,但不能有超过k个连续的数字被选择.你的任务是使得选出的数字的和最大. 输入描述 Input De ...

  3. 临时起异，要进入C++领域耍一个程序

    没办法.两周之内可以搞定吧. 就一个SESSION 0的问题. 网上有类似源码,调一下应该就可以吧..保佑顺利. 基本语法都还记得,快N年啦... #include <iostream> ...

  4. nyoj_116_士兵杀敌（二）_201404131107

    士兵杀敌(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军经常 ...

  5. [bzoj 1041][HAOI2008]圆周上的整点（枚举）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1041 分析:实质上是求(a,b,c)勾股数的个数,其中c是确定的. 对于勾股数有一组通式: a ...

  6. 转:Redis 缓存策略

    转:http://api.crap.cn/index.do#/web/article/detail/web/ARTICLE/7754a002-6400-442d-8dc8-e76e72d948ac 目 ...

  7. 新浪微博开放平台之OAuth2.0认证

    1.先到开放平台创建一个移动应用.获得key和secret,接着到"应用信息"里面填写授权回调页的网址,该网址能够随意,可是必须是能訪问的. 2.通过新浪提供的api:https: ...

  8. POJ 2485 Highways &amp;&amp; HDU1102（20/200）

    题目链接:Highways 没看题,看了输入输出.就有种似曾相识的感觉,果然和HDU1102 题相似度99%,可是也遇到一坑 cin输入居然TLE,cin的缓存不至于这么狠吧,题目非常水.矩阵已经告诉 ...

  9. 在Tomcat服务器中去端口访问域名

    在刚购买域名并解析后,从外网访问Tomcat服务器时是需要在域名后面加端口":8080".要去端口访问的步骤如下: 在Tomcat目录下的conf文件夹下,打开server.xml ...

  10. hdu5305(2015多校2)--Friends（状压，深搜）

    Friends Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Su ...