接着上一篇博客的内容顺藤摸瓜往下想，既然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. centos 7 修改系统屏幕分辨率

    centos 7 修改系统屏幕分辨率,命令方式和图形方式的修改方法. 命令:xrandr 通过命令 xrandr 修改系统的分辨率,输入xrandr: bash [admin@localhost ~] ...

  2. PSP（4.27——5.3）以及周记录

    1.PSP 4.27 11:40 18:10 125 265 Cordova A Y min 4.28 10:00 16:50 200 210 Cordova A Y min 4.29 15:30 2 ...

  3. Lodop打印设计界面生成代码带”...(省略)”

    Lodop的设计界面中,菜单里的生成代码,如果打印项内容过多,后面会显示”...(省略)”,省略的是打印项的内容值,无论是纯文本还是超文本,都可以用选中打印项-右键-设置属性里找到该打印项的全部值,可 ...

  4. python中lambda表达式中自由变量的坑，因为for循环结束了 变量还保存着，详见关于for循环的随笔

    http://blog.csdn.net/u010949971/article/details/70045537

  5. docker--compose--sonarqube

    Create this docker-compose.yml file: version: "2" services: sonarqube: image: sonarqube po ...

  6. BZOJ4200 NOI2015小园丁与老司机（动态规划+上下界网络流）

    一看上去就是一个二合一的题.那么先解决第一部分求最优路线(及所有可能在最优路线上的线段). 由于不能往下走,可以以y坐标作为阶段.对于y坐标不同的点,我们将可以直接到达的两点连边,显然这样的边的个数是 ...

  7. xml文件格式化后不能获取到值

    在有些时候,我们要使用到xml文件,必须得将文件中的内容压缩成一行,才能读取到其中的值,一旦有换行符.制表符.空格之类的就读不到.所以只能在开发好以后,将代码压缩再执行,十分不方便. 尝试了几个替换符 ...

  8. day28 staticmethod 装饰器

    静态方法装饰器 完全面向对象的程序中,如果存在某个函数既和对象无关也和类无关,就用staticmethod方法, 在调用此方法的时候只需要加上类名即可,说白了就是强行面向对象....把不是对象的方法也 ...

  9. 【 Gym - 101124E 】Dance Party （数学）

    BUPT2017 wintertraining(15) #4G Gym - 101124 E.Dance Party 题意 有c种颜色,每个颜色最多分配给两个人,有M个男士,F个女士,求至少一对男士同 ...

  10. outline与border的区别

    在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的h ...