<!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. 在node.js中，使用基于ORM架构的Sequelize，操作mysql数据库之增删改查

    Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...

  2. 关于 .NET Core 动态链接库的开发

    上个月月底,VS2017RC版发布了,一个很大的特点就是将原来的xProj文件又改回了csproj了. 这样一改,其实很多新的问题也暴露出来了,最严重的问题就是Net版本兼容性. 原来的Net体系大致 ...

  3. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  4. js获取页面url

    设置或获取对象指定的文件名或路径. window.location.pathname例:http://localhost:8086/topic/index?topicId=361alert(windo ...

  5. arcgis 许可异常的解决

    异常现象: arcgis 许可服务管理器中无法重新读取许可,许可服务启动后立即停止.         解决方法: 1.卸载license:安装新的license!重新破解,替换license文件夹BI ...

  6. Undefined symbols for architecture arm64:

    1. 没有往项目中导入静态库(.a 文件)需要的 framework. 2.拖到项目中的静态库不支持arm64(或其他)指令集  这种情况没遇到过 一般都是第一种情况.

  7. 一个URL的物理文件的体现

    场景 许多同学在开发过程中经常会遇到一个问题,怎么去定义一个url?以及定义一个url之后怎么根据一个url定义文件. 公司组织一次内部培训,为了把这次培训的内容以博客的形式共享出来. URL与文件的 ...

  8. Newtonsoft.Json, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b9a188c8922137c6

    未能加载文件或程序集“Newtonsoft.Json, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b9a188c8922137c6”或它的某一个 ...

  9. Akka初步介绍

    Akka可能很多人都没有用过,也不知道是什么,但如果说起Scala或Spark就有很多人都听说过或使用过 ,这里简单说下三者的关系Akka是使用Scala开发的,Spark中使用了Akka作为其消息的 ...

  10. android Broadcast广播消息代码实现

    我用的是Fragment , 发送写在一个类中,接收写在另外一个类的内部类中.代码动态实现注册. 代码: myReceiver = new zcd.netanything.MyCar.myReceiv ...