接着上一篇博客的内容顺藤摸瓜往下想，既然stage有景深这个概念，可以表达3D场景，那么这个stage就可以呈现立体几何咯，于是自己写了个Cubic Demo

一个正方体有6个面，我们把一个正方体平铺开来就是一个十字的形状，然后变换每一面的角度把正方体“折叠”起来！

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <title>Cube</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        li{

            list-style: none;

        }

        .wrapper{

            width:200px;

            height: 200px;

            border: 1px solid #f60;

            margin: 0 auto;

            padding: 100px;

            margin-top: 100px;

            -webkit-perspective:800px;

        }

        .cube{

            width: 200px;

            height: 200px;

            position: relative;

            -webkit-transform-style:preserve-3d;

            transition:1s all;

        }

        .cube li{

            width: 200px;

            height: 200px;

            position: absolute;

            text-align: center;

            line-height: 200px;

            color: #fff;

            font-size: 30px;

        }

        .cube li:nth-of-type(1){

            background: red;

            top: -200px;

            left: 0;

            -webkit-transform-origin: bottom;

            -webkit-transform: translateZ(100px) rotateX(90deg);

        }

        .cube li:nth-of-type(2){

            background: green;

            top: 0;

            left: -200px;

            -webkit-transform-origin: right;

            -webkit-transform: translateZ(100px) rotateY(-90deg);

        }

        .cube li:nth-of-type(3){

            background: blue;

            top: 0;

            left: 0;

            -webkit-transform: translateZ(100px);

        }

        .cube li:nth-of-type(4){

            background: yellow;

            top: 0;

            left: 200px;

            -webkit-transform-origin: left;

            -webkit-transform: translateZ(100px) rotateY(90deg);

        }

        .cube li:nth-of-type(5){

            background: purple;

            top: 200px;

            left: 0;

            -webkit-transform-origin: top;

            -webkit-transform: translateZ(100px) rotateX(-90deg);

        }

        .cube li:nth-of-type(6){

            background: orange;

            top: 0;

            left: 0;

            -webkit-transform: translateZ(-100px) rotateX(180deg);

        }

        .wrapper:hover .cube{

            -webkit-transform:rotateX(180deg);

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <ul class="cube">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

        </ul>

    </div>

</body>

</html>

也可以把另外两个侧面去掉，只留4个面。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <title>Cube2</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        li{

            list-style: none;

        }

        .wrapper{

            width:200px;

            height: 200px;

            border: 1px solid #f60;

            margin: 0 auto;

            padding: 100px;

            margin-top: 100px;

            -webkit-perspective:800px;

        }

        .cube{

            width: 200px;

            height: 200px;

            position: relative;

            -webkit-transform-style:preserve-3d;

            transition:1s all;

            -webkit-transform:translateZ(-100px) rotate(0deg);

        }

        .cube li{

            width: 200px;

            height: 200px;

            position: absolute;

            text-align: center;

            line-height: 200px;

            color: #fff;

            font-size: 30px;

        }

        .cube li:nth-of-type(1){

            background: red;

            -webkit-transform:translateZ(100px);

        }

        .cube li:nth-of-type(2){

            background: green;

            -webkit-transform-origin:top;

            -webkit-transform:translateZ(-100px) rotateX(90deg);

        }

        .cube li:nth-of-type(3){

            background: blue;

            -webkit-transform:translateZ(-100px) rotateX(180deg);

        }

        .cube li:nth-of-type(4){

            background: yellow;

            -webkit-transform-origin:bottom;

            -webkit-transform:translateZ(-100px) rotateX(-90deg);

        }

        .wrapper:hover .cube{

            -webkit-transform: translateZ(-100px) rotateX(270deg);

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <ul class="cube">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

    </div>

</body>

</html>

正方体旋转demo的更多相关文章

  1. CSS实现正方体旋转

    代码如下: <!DOCTYPE html><html lang="en"><head>    <meta charset="UT ...

  2. canves 图片旋转 demo

    <!DOCTYPE htmls> <html> <head> <title></title> <style> </styl ...

  3. css3 正方体旋转

    <div class="contain"> <div class="box"> <div class="face one ...

  4. HTML5 纯CSS3实现正方体旋转3D效果

    实现效果: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  5. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  6. 纯css耍个透明正方体转一转

    效果 效果图如下 ​ 实现思路 定义一个最外层的容器,用来控制显示的位置 定义一个父容器,用来设置元素被查看位置的视图,这里使用到CSS3的perspective 属性 定义子容器,设置为相对定位,利 ...

  7. 【自己给自己题目做】：如何在Canvas上实现魔方效果

    最终demo -> 3d魔方 体验方法: 浮动鼠标找到合适的位置,按空格键暂停 选择要翻转的3*3模块,找到相邻两个正方体,鼠标点击第一个正方体,并且一直保持鼠标按下的状态直到移到第二个正方体后 ...

  8. Canvas之蛋疼的正方体绘制体验

    事情的起因 之前写了篇谈谈文字图片粒子化 I,并且写了个简单的demo -> 粒子化.正当我在为写 谈谈文字图片粒子化II 准备demo时,突然想到能不能用正方体代替demo中的球体粒子.我不禁 ...

  9. 【自己给自己题目做】：如何用裸的 Canvas 实现魔方效果

    最终demo -> 3d魔方 体验方法: 浮动鼠标找到合适的位置,按空格键暂停 选择要翻转的3*3模块,找到相邻两个正方体,鼠标点击第一个正方体,并且一直保持鼠标按下的状态直到移到第二个正方体后 ...

随机推荐

  1. Oracle 数据表误删恢复 Flashback

    1. 前提条件. recyclebin 参数打开. 验证参数是否打开: SHOW PARAMETER RECYCLEBIN 2. 如果参数没有打开的话 需要打开,并且重启一下数据库方法为 alter ...

  2. Linux下安装oracle的过程

    1. Linux 安装 主要不要将home分区设置的特别大 2. 安装必须的一些包. yum install -y \ binutils.x86_64 \ elfutils-libelf-devel. ...

  3. logstash 使用kafka范例

    写入到kafka input { stdin { } } output { kafka { bootstrap_servers => "10.0.0.200:9092" to ...

  4. ItemsControl的两种数据绑定方式

    最近在学习ItemsControl这个控件的时候,查看了MSDN上面的一个例子,并且自己做了一些修改,这里主要使用了两种方式来进行相应的数据绑定,一种是使用DataContext,另外一种是直接将一个 ...

  5. 【Mysql】—— 索引的分类

    注意:索引是在存储引擎中实现的,也就是说不同的存储引擎,会使用不同的索引.MyISAM和InnoDB存储引擎:只支持BTREE索引,也就是说默认使用BTREE,不能够更换.MEMORY/HEAP存储引 ...

  6. fopen

    转自http://blog.sina.com.cn/s/blog_4b986f1a0101349k.html matlab中fopen函数在指定文件打开的实例如下: *1)“fopen”打开文件,赋予 ...

  7. python 抽象类与接口类

    几个类 实现的方法都一致的话 就继承同一个父类 在父类写一个公共方法 给子类使用

  8. MySQL中char、varchar和nvarchar的区别

    一.char和varchar的区别char是固定长度的,而varchar会根据具体的长度来使用存储空间,另外varchar需要用额外的1-2个字节存储字符串长度.1). 当字符串长度小于255时,用额 ...

  9. String在内存中如何存储（Java）

    JDK1.8中JVM把String常量池移入了堆中,同时取消了“永久代”,改用元空间代替(Metaspace)java中对String对象特殊对待,所以在heap区域分成了两块,一块是字符串常量池(S ...

  10. BZOJ2006[NOI2010]超级钢琴——堆+主席树

    题目描述 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的 音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符的美妙度为Ai,其中 ...