<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

/*设置300px的景深 景深基点为左侧*/

.wrap{width:100px;height:100px;padding:100px; border:5px solid #000; margin:100px auto; -webkit-perspective:300px;-webkit-perspective-origin:left center;}

/*建立立体空间并设置变换基点在立方体的center处*/

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

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

.box div:nth-of-type(1){left:0;top:-100px;background:#9C0; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg);}

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

.box div:nth-of-type(3){left:0px;top:0px;background:#CCF;}

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

.box div:nth-of-type(5){left:0px;top:100px;background:#69C;-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg);}

.box div:nth-of-type(6){left:0;top:0;background:#F0C;-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写一个立方体并在鼠标悬停的时候无限循环旋转

  2. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  3. 聊聊用CSS3来玩立方体

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 虽然现在很多浏览器都还不支持css3的3D转换,不过估计也已经有很多人都有玩css3的3D了......所以我这篇也就相当于水一下了,哈哈 ...

  4. css3制作旋转立方体相册

    首先让我们来看一下最终效果图: 当鼠标放在图片上是介个样子滴: 是不是觉得很好看?那接下来就一起制作吧! 我个人觉得编程,首先是思路,然后是代码,一起分析一下这个效果的思路. 1.背景颜色,它属于一种 ...

  5. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  6. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  7. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  8. 从零开始写一个武侠冒险游戏-7-用GPU提升性能(2)

    从零开始写一个武侠冒险游戏-7-用GPU提升性能(2) ----把地图处理放在GPU上 作者:FreeBlues 修订记录 2016.06.21 初稿完成. 2016.08.06 增加对 XCode ...

  9. DX11 Without DirectX SDK--03 渲染一个立方体

    回到 DirectX11--使用Windows SDK来进行开发 一个立方体有8个顶点,然而绘制一个立方体需要画12个三角形,如果按照前面的方法绘制的话,则需要提供36个顶点,而且这里面的顶点数据会重 ...

随机推荐

  1. 转:ORA-15186: ASMLIB error function = [asm_open], error = [1], 2009-05-24 13:57:38

    转:ORA-15186: ASMLIB error function = [asm_open], error = [1], 2009-05-24 13:57:38http://space.itpub. ...

  2. postgresql 基本语法

    postgresql数据库创建/修改/删除等写入类代码语法总结: 1,创建库 2,创建/删除表 2.1 创建表 create table myTableName 2.2 如果表不存在则创建表 crea ...

  3. java I/O流

    输入流(读取数据的流) BufferedInputStream---继承--->FileInputStream--继承--->InputStream------> (1)字节流操作中 ...

  4. Linux学习日记-（一）

    一.为什么学习Linux 大学时开始接触Linux,最开始学习的是RedHat(小红帽),感觉Linux好像很久不见的老朋友,用起来很舒服(虽然我们用的是DotNet).很喜欢它的命令模式,让我能接触 ...

  5. 需要UWP Vendor一名

    工作地点北京,海淀,微软大厦2号楼,小冰项目组.

  6. 页面中调用系统常用的对话框需要用到的classid

    ■打开■ <input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开> < ...

  7. 高级SQL运用

    一:什么是数据库设计? 数据库设计就是将数据库中的数据实体以及这些数据实体之间的关系,进行规范和结构化的过程. 二:为什么要实施数据库设计? 1:良好的数据库设计可以有效的解决数据冗余的问题 2:效率 ...

  8. spring声明式事务管理总结

    事务配置 首先在/WEB-INF/applicationContext.xml添加以下内容: <!-- 配置事务管理器 --> <bean id="transactionM ...

  9. Spark Shuffle原理、Shuffle操作问题解决和参数调优

    摘要: 1 shuffle原理 1.1 mapreduce的shuffle原理 1.1.1 map task端操作 1.1.2 reduce task端操作 1.2 spark现在的SortShuff ...

  10. Jps命令—使用详解

    jps是jdk提供的一个查看当前Java进程的小工具, 可以看做是JavaVirtual Machine Process Status Tool的缩写.非常简单实用. 命令格式:jps [option ...