<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="../css/public.css"/>

        <style type="text/css">

        /*

         -webkit-perspective: 200px;-webkit-perspective-origin: right top;   景深

         旋转移动

         */

            .wrap{width: 100px;height: 100px;padding: 100px;border: 5px solid #000;margin: 100px auto;-webkit-perspective: 200px;-webkit-perspective-origin: right top;}

            .box{width: 100px;height: 100px;position: relative;-webkit-transform-style: preserve-3d;-webkit-transition: 2s;-webkit-transform-origin: center center -50px;}

            .box div{position: absolute;width: 100px;height: 100px;color: #FFF;font-size: 40px;line-height: 100px;text-align: center;}

            .box div:nth-child(1){left: 0;top: -100px;background: blue;-webkit-transform:rotateX(90deg);-webkit-transform-origin: bottom;}

            .box div:nth-child(2){left: -100px;top: 0;background: yellow;-webkit-transform:rotateY(-90deg);-webkit-transform-origin: right;}

            .box div:nth-child(3){left: 0;top: 0;background: red;-webkit-transform: translateZ(0px);}

            .box div:nth-child(4){left: 100px;top: 0;background: #f60;-webkit-transform:rotateY(90deg);-webkit-transform-origin: left;}

            .box div:nth-child(5){left: 0px;top: 100px;background: gray;-webkit-transform:rotateX(-90deg);-webkit-transform-origin: top;}

            .box div:nth-child(6){left: 0px;top: 0;background: green;-webkit-transform: translateZ(-100px) rotateX(180deg);}

            .wrap:hover .box{-webkit-transform: rotateX(180deg);}

        </style>

    </head>

    <body>

        <div class="wrap">

            <div class="box">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

                <div>5</div>

                <div>6</div>

            </div>

        </div>

    </body>

</html>

用css3做一个正方体的更多相关文章

  1. 从零开始的全栈工程师——利用CSS3画一个正方体 ( css3 )

    transform属性 CSS3的变形(transform)属性让元素在一个坐标系统中变形.transform属性的基本语法如下: transform:none | <transform-fun ...

  2. 用css3做一个求婚小动画

    概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www ...

  3. 用 CSS3 做一个流星雨动画

    昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一.流星动画 首先创建一个 div 作为画布 <div id="stars" ...

  4. 用js+css3做一个小球投篮的动画（easing）

    <!DOCTYPE html> <html> <head> <script src="jquery-1.11.3.min.js">& ...

  5. 用CSS3的transform来做一个立方体

    有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...

  6. 用js，css3 做的一个球

    用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些 原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色 ...

  7. 领导让我重新做一个微信H5页面！

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  8. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  9. 如何使用impress.js做一个网页版本的PPT

    blockquote{font-size: 18px;line-height:1.5;margin:0;}line-height: 1.5; 要做一个网站制作规范培训,之前村长做过一次培训,但是后来一 ...

随机推荐

  1. C#-#define条件编译

    本文导读: C#的预处理器指令从来不会转化为可执行代码的命令,但是会影响编译过程的各个方面,常用的预处理器指令有#define.#undef.#if,#elif,#else和#endif等等,下面介绍 ...

  2. C#开发微信门户及应用(7)-微信多客服功能及开发集成

    最近一直在弄微信的集成功能开发,发现微信给认证账户开通了一个多客服的功能,对于客户的咨询,可以切换至客服处理的方式,而且可以添加多个客服进行处理,这个在客户咨询比较多的时候,是一个不错的营销功能.微信 ...

  3. 超越 JSON: Spearal 序列化协议简介

      Spearal 是一个新的开源的序列化协议,这个协议旨在初步替换JSON 将HTML和移动应用连接到Java的后端. Spearal的主要目的是提供一个序列协议,这个协议即使是在端点间传输的复杂的 ...

  4. Cocoapods无法使用/安装失败/失效解决方法

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #666666 } sp ...

  5. Spring MVC中的ModelMap作用及用法

    ModelMap的作用: ModelMap对象主要用于传递控制方法传递数据到结果页面.类似于request的setAttribute方法的作用. 所以我们要想在jsp页面获取数据,只要将数据放到Mod ...

  6. ABP集合贴

    thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>t ...

  7. java多线程同步，等待，唤醒

    notify().notifyAll().wait()属于java.lang.Object,java.lang.Thread也是Object,自然也有上述方法: sleep().interrupt() ...

  8. jQuery动画与特效详解

    本文主要是讲解和学习jQuery的自动显隐,渐入渐出等. 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏. 代码如下: &l ...

  9. Android Weekly Notes Issue #228

    Android Weekly Issue #228 October 23rd, 2016 Android Weekly Issue #228 本期内容包括: Android 7.1的App Short ...

  10. TFFS格式化到创建成功过程

    True FFS内核编程 1.格式化FLASH 即使FLASH没有和块设备驱动绑定,也可对其进行格式化. tffsDevFormat (int tffsDriveNo, int formatArg); ...