立方体：父盒子规定了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]调用动态表单时,传递自定义参数

    插件中在调用动态表单时,通过DynamicFormShowParameter的CustomParams,增加自定义的参数. private void ShowMaterialStock() { obj ...

  2. android在listview中放入从sdcard读取的bitmap

    重写viewbinder public class viewbinder_bookmark implements SimpleAdapter.ViewBinder{ @Override public ...

  3. 工作流框架Activiti

    最近在看一些项目设计方面的文章,涉及到了工作流技术,于是了解一下. 1.概念 工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照 ...

  4. spring-boot-starter-actuator（健康监控）配置和使用

    在生产环境中,需要实时或定期监控服务的可用性.Spring Boot的actuator(健康监控)功能提供了很多监控所需的接口,可以对应用系统进行配置查看.相关功能统计等. 集成: <depen ...

  5. MySQL: Create Master - Slave Servers

    http://www.unixmen.com/setup-mariadb-master-slave-replication-in-centos-7/ and http://www.rackspace. ...

  6. SIGSEGV 和 SIGBUS & gdb看汇编

    参考这篇文章: http://blog.chinaunix.net/uid-24599332-id-2122898.html SIGBUS和SIGSEGV也许是我们在平时遇到的次数最多的两个内存错误信 ...

  7. WPF 有趣的动画效果

    WPF 有趣的动画效果         这一次我要呈上一个简单的文章,关于给你的WPF apps加入美丽的光线动画,可是我对动画这东西可能有点入迷了.         实际上.我对动画如此的入迷,以至 ...

  8. Python3基础（九） 错误和异常

    本文主要介绍Python中的错误和异常,涉及到简单的异常处理.抛出异常以及清理动作.至于自定义异常类,将在介绍类与继承的时候讲到. 一.定义 常见的两种错误:语法错误 和 异常. 1.语法错误(Syn ...

  9. 【大话QT之十四】QT实现多语言切换

    功能需求: 网盘client要可以实现多国语言的切换,第一版要支持中.英文的切换. 在实现过程中感觉QT对多国语言的支持还是非常不错的.制作多语言包非常方便.切换的逻辑也非常easy. 以下就来看一下 ...

  10. VC中CString和WPARAM之间的相互转换

    在传递自己定义消息的过程中.须要转换CString 变量. 在发送消息端使用例如以下方法: SendMessage(WM_MESSAG_MINE,0,(LPARAM)strVal.AllocSysSt ...