<!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. 使用Ring Buffer构建高性能的文件写入程序

    最近常收到SOD框架的朋友报告的SOD的SQL日志功能报错:文件句柄丢失.经过分析得知,这些朋友使用SOD框架开发了访问量比较大的系统,由于忘记关闭SQL日志功能所以出现了很高频率的日志写入操作,从而 ...

  2. TileJSON

    TileJSON TileJSON is an open standard for representing map metadata. License The text of this specif ...

  3. Mac下查看端口占用

    netstat命令 netstat -an | grep 端口号 lsof命令 lsof -i:端口号

  4. （八）map，filter，flatMap算子-Java&Python版Spark

    map,filter,flatMap算子 视频教程: 1.优酷 2.YouTube 1.map map是将源JavaRDD的一个一个元素的传入call方法,并经过算法后一个一个的返回从而生成一个新的J ...

  5. Oracle策略相关

    Oracle策略可以限制查询.修改.删除.新增等操作,刚接触,对查询做一个测试: 参照 http://blog.csdn.net/diyyong/article/details/19552637 用法 ...

  6. JavaScript 函数

    JavaScript 函数 介绍:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.嗯,就像Java中封装的方法一样. 将脚本编写为函数,就可以避免页面载入时执行该脚本. 函数包含着一些代码 ...

  7. cstore_fdw的安装使用以及源码分析

    一.cstore_fdw的简介 https://github.com/citusdata/cstore_fdw,此外部表扩展是由citusdata公司开发,使用RC_file格式对数据进行列式存储. ...

  8. [笔记]linux用户与用户组

    sudo useradd -m john 自动建立主目录 sudo passwd john sudo useradd -g groupusers mike sudo useradd -s /bin/b ...

  9. linux基础知识3_根文件系统详解

    文件系统: rootfs:根文件系统 /boot:系统启动相关的文件,如内核.initrd以及grub /dev:设备文件 块设备:随机访问 字符设备:线性访问,按字符为单位 设备号:主设备号(maj ...

  10. hibernate学习-HibernateDemo

    上篇文章我们讲述了eclipse安装hibernate插件的过程,这篇文章我们来做第一个HibernateDemo. 1).hibernate的jar开发包的下载,官网下载地址:http://hibe ...