接着上一篇博客的内容顺藤摸瓜往下想，既然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. [小知识] 关闭我的电脑里面的百度网盘以及修改win+e快捷键打开我的电脑

    1. 登录百度云盘客户端 设置->基本->取消在我的电脑中显示百度网盘 2. 修改win+e的默认显示 打开我的电脑. 选择查看-选项 文件夹选项修改为: 此电脑即可..

  2. vCenter机器查找功能不可用的解决

    1. 公司内有多个vCenter机器, 不同的部门 组别 有不通的vCenter来进行管理 最近发现有一个管理比较多的组别的vCenter下载远程登录的情况下总是无法进行高级搜索  造成想找一个虚拟机 ...

  3. Node json

    //1:加载相关模块 http express mysqlconst http = require("http");const mysql = require("mysq ...

  4. CENTOS7修改ip

    编辑网卡设置 vi /etc/sysconfig/network-scripts/ifcfg-ens33 编辑内容 vi /etc/sysconfig/network-scripts/ificg-en ...

  5. loadrunner基础学习笔记二

    virtual user generator(vugen) 在测试环境中,loadrunner在物理计算机上使用vuser代替实际用户.vuser以一种可重复.可预测的方式模拟典型用户的操作,对系统施 ...

  6. python---面对对象的三大特征

    一.三大特征 面对对象的三大特征:继承.多态和封装,继承在面向对象类的创建中非常常见. 1.继承 为什么会有继承,当我们要创建一个新类的时候,发现他有很多属性或者反法都和我们另一个类的方法相同,这时我 ...

  7. BZOJ1559[JSOI2009]密码——AC自动机+DP+搜索

    题目描述 输入 输出 样例输入 10 2 hello world 样例输出 2 helloworld worldhello 提示 这题算是一个套路题了,多个串求都包含它们的长为L的串的方案数. 显然是 ...

  8. codeforces 793B. Igor and his way to work

    B. Igor and his way to work time limit per test 3 seconds memory limit per test 256 megabytes input ...

  9. 搜索Ex

    哎呀好几天没写POI题解了 (>﹏<) 看着摇曳不定的小旗子深深惶恐 打算开始肝洛谷试炼场的提高分区了[对我就是这么菜… 搜索Ex 比暴搜不错得多的题 洛谷P1514 引水入城 拆成两问来 ...

  10. 【BZOJ4813】[CQOI2017]小Q的棋盘（贪心）

    [BZOJ4813][CQOI2017]小Q的棋盘(贪心) 题面 BZOJ 洛谷 题解 果然是老年选手了,这种题都不会做了.... 先想想一个点如果被访问过只有两种情况,第一种是进入了这个点所在的子树 ...