<meta charset="utf8">

<style>
.cube {
position: absolute;
left: 50%;
top: 250px;
} .rightFace,.leftFace,.topFace div{
position: absolute;
padding: 10px;
width: 180px;
height: 180px;
} .leftFace {
transform: skew(0deg, 30deg);
background-color: #ccc;
} .rightFace {
transform: skew(0deg, -30deg);
background-color: #ddd;
left: 200px;
} .topFace {
transform: rotate(60deg);
} .topFace div {
transform: skew(0deg, -30deg) scale(1, 1.16);
background-color: #eee;
font-size: 0.862em;
top: -300px;
left: -48px;
} </style> <div class="cube">
<div class="topFace">
<div>

</div>
</div>
<div class="leftFace">

</div>
<div class="rightFace">

</div>
</div>

原版

<meta charset="utf8">
<style>
/*
Cube Experiment
Date: 26th March 2009
Author: Paul Hayes
*/ #experiment {
min-height: 500px;
} .cube {
position: absolute;
left: 50%;
top: 250px;
margin-left: -200px;
} .cube p {
line-height: 14px;
font-size: 12px;
} .cube h2 {
font-weight: bold;
} .rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 180px;
height: 180px;
} .rightFace,
.leftFace,
.topFace {
position: absolute;
} .leftFace {
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
-o-transform: skew(0deg, 30deg);
-ms-transform: skew(0deg, 30deg);
transform: skew(0deg, 30deg);
background-color: #ccc;
} .rightFace {
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
-o-transform: skew(0deg, -30deg);
-ms-transform: skew(0deg, -30deg);
transform: skew(0deg, -30deg);
background-color: #ddd;
left: 200px;
} .topFace div {
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
-o-transform: skew(0deg, -30deg) scale(1, 1.16);
-ms-transform: skew(0deg, -30deg) scale(1, 1.16);
transform: skew(0deg, -30deg) scale(1, 1.16);
background-color: #eee;
font-size: 0.862em;
} .topFace {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
top: -158px;
left: 100px;
} /* Optional WebKit Animations */
/* .rightFace {
-webkit-transition: -webkit-transform 1s linear;
} .leftFace {
-webkit-transition: -webkit-transform 1s linear;
} .topFace {
-webkit-transition: -webkit-transform 1s linear;
} .cube:hover .rightFace {
-webkit-transform: skew(0deg, -30deg) translate(100px, 100px);
} .cube:hover .leftFace {
-webkit-transform: skew(0deg, 30deg) translate(-100px, 100px);
} .cube:hover .topFace {
-webkit-transform: rotate(60deg) translate(-50px, -50px);
} /* Video */
.cube video {
left: -20px;
top: -20px;
position: relative;
} .cube div.rightFace video {
left: -301px;
top: -35px;
opacity: 0.9;
} .cube div.leftFace video {
opacity: 0.7;
top: -35px;
left: -100px;
} .cube div.rightFace,
.cube div.leftFace {
overflow: hidden;
} .cube div.topFace.video div {
background-color: #000;
color: #fff;
} </style> <div id="experiment">
<div class="cube">
<div class="topFace"><div>
<h2>Top cube face</h2>
<p>The top face is nested in an extra div tag to give correct rotation of skewed rectangle.</p>
<p>This face is also scaled, so the font size has been reduced to accommodate.</p>
</div></div>
<div class="leftFace">
<h2>Left cube face</h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rightFace">
<h2>Right cube face</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>

地址

http://paulrhayes.com/experiments/cube/multiCubes.html

http://paulrhayes.com/experiments/cube/index.html

css3 一个简单的静态立方体的更多相关文章

  1. Socket——实现一个简单的静态网页服务器

    整体结构就是使用ServerSocket监听一个地址,当有接受到请求之后,解析请求中的资源路径.服务器资源路径存放在项目下的一个目录中,服务器会到这个目录中根据请求的路径去寻找相应的资源.如果找到了则 ...

  2. 初始nginx(启动运行) 使用nginx做一个简单的静态资源服务器

    第一次接触nginx的时候,那时候公司还是用的一些不知名的小技术,后来公司发展问题,重新招了人,然后接触到nginx,公司 使用nginx用来做代理服务器,所有请求 都先经过nginx服务器,然后交由 ...

  3. Css打造一个简单的静态七巧板

    偶然在微博上看到用css写一个七巧板,正好也有一些源代码,于是就试着敲了敲. 主要是利用了css3的transform,实现平移,旋转,变形,直接用看到的代码敲出来之后有些问题,因为宽度上下面绿色的三 ...

  4. nginx 配一个简单的静态文件服务器 和一个虚似机

    下面是个图片服务器: server { listen ; server_name img.xxx.xxx.com; root /data/site/img.xxx.xxx.com; access_lo ...

  5. 用node搭建简单的静态资源管理器

    我们都知道,老牌的3p服务器都是自带静态资源管理器的.但是node不同,它没有web容器,它的路由地址和真实地址可以没有联系,所有node的优点,是可以把路由做得相当漂亮. 但静态资源管理器也是必不可 ...

  6. 使用Node.js快速搭建简单的静态文件服务器

    做前端有时会采用一些复杂框架,在文件系统中直接打开页面(用file:///方式打开),往往会报跨域的错,类似于“XMLHttpRequest cannot load ...(文件名). Cross o ...

  7. Windows 上静态编译 Libevent 2.0.10 并实现一个简单 HTTP 服务器(无数截图)

    [文章作者:张宴 本文版本:v1.0 最后修改:2011.03.30 转载请注明原文链接:http://blog.s135.com/libevent_windows/] 本文介绍了如何在 Window ...

  8. Windows 上静态编译 Libevent 2.0.10 并实现一个简单 HTTP 服务器(图文并茂,还有实例下载)

    [文章作者:张宴 本文版本:v1.0 最后修改:2011.03.30 转载请注明原文链接:http://blog.s135.com/libevent_windows/] 本文介绍了如何在 Window ...

  9. 一个简单的Web服务器-支持静态资源请求

    目标 实现一个简单的Web服务器,能够根据HTTP请求的URL响应对应的静态资源,如果静态资源不存在则响应404. HttpServer 使用ServerSocket实现的一个服务器,request根 ...

随机推荐

  1. [Algorithm] Fibonacci problem by using Dynamic programming

    vThere are three ways to solve Fibonacci problem Recursion Memoize Bottom-up 'First Recursion approa ...

  2. 如何在网页中嵌入QQ 阿里旺旺等代码

    1 登陆以下网址: http://wp.qq.com/login.html?target=1 2 复制代码到HTML中即可 3 将对方和自己的QQ都登陆测试(注意自己QQ必须是2010以上版本,否则会 ...

  3. ffmpeg代码解析

    void avdevice_register_all(void){    static int initialized;    if (initialized)        return;    i ...

  4. Direcshow中视频捕捉和參数设置报告

    Direcshow中视频捕捉和參数设置报告 1.      关于视频捕捉(About Video Capture in Dshow) 1视频捕捉Graph的构建 一个能够捕捉音频或者视频的graph图 ...

  5. 算法笔记_059:蓝桥杯练习 Anagrams问题(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相同的.例如,“Unclea ...

  6. mysql 严格模式取消 group by 和 date zore

    取消单个库的时间严格模式 set global sql_mode=(select replace(@@sql_mode,'NO_ZERO_IN_DATE,NO_ZERO_DATE',''));

  7. (四)Lucene——搜索和相关度排序

    1. 搜索 1.1 创建查询对象的方式 通过Query子类来创建查询对象 Query子类常用的有:TermQuery.NumericRangeQuery.BooleanQuery 特点:不能输入luc ...

  8. Javascript 判断网页横竖屏

    本篇文章由:http://xinpure.com/javascript-to-determine-page-anyway-screen/ Html5 流行至今,自适应的网站已经多如牛毛,但是横竖屏的切 ...

  9. java集合框架01——总体框架一览

    java集合框架是java提供的工具包,在java.util.*中,这个包中包含了常用的数据结构:集合.数组.链表.栈.队列.映射等.java集合框架主要可以分为四个部分:List列表.Set集合.M ...

  10. oracle expdp导入时 提示“ORA-39002: 操作无效 ORA-39070: 无法打开日志文件 ”

    1.导出数据库的时候报错 expdp zz/zz@orcl directory=exp_dp dumpfile=zz_20170520.dump logfile=zz_20170520.log   2 ...