接着上一篇博客的内容顺藤摸瓜往下想，既然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. springsession 实现session 共享

    首先加入依赖1 <dependency> <groupId>org.springframework.session</groupId> <artifactId ...

  2. free命令详解

    free的命令详解   free命令可以显示当前系统未使用的和已使用的内存数目,还可以显示被内核使用的内存缓冲区. 语法 free [选项] 选项 -b 以Byte为单位显示内存的使用情况 -k 以K ...

  3. 快速排序Qsort

    快速排序Qsort是所有学习算法和数据结构最基础的一个部分,也是考试题和面试的一个小重点. 快速排序的时间复杂度为O(N*lgN),而且常数因子很小. 对于随机数据,效率特别高: 对于构造的恶意数据, ...

  4. BZOJ4385[POI2015]Wilcze doły——单调队列+双指针

    题目描述 给定一个长度为n的序列,你有一次机会选中一段连续的长度不超过d的区间,将里面所有数字全部修改为0.请找到最长的一段连续区间,使得该区间内所有数字之和不超过p. 输入 第一行包含三个整数n,p ...

  5. 向git添加和提交文件

    状态 git status 可以知道有哪些文件被修改,哪些文件待提交 当前无待提交文件 分区 三个分区:工作区,缓存区,版本库 三个分区之间的联系: 工作区 >> git add > ...

  6. windows 系统无法安装

    1. 提示windows 无法安装到这个磁盘,选中的磁盘具有MBR分区表. Windows cannot be installed to this disk.the selected disk has ...

  7. Leetcode 125.验证回文串 By Python

    思路 显然一个字符串不止包括字母和数字字符,所以我们可以先提取出来我们要进行比较的字符 还有一个问题是,字母是分大小写的,我们要统一大写或者统一小写,就是规范化 代码 class Solution(o ...

  8. 洛谷 P3297 [SDOI2013]逃考 解题报告

    P3297 [SDOI2013]逃考 题意 给一个平面矩形,里面有一些有标号点,有一个是人物点,人物点会被最近的其他点控制,人物点要走出矩形,求人物点最少被几个点控制过. 保证一开始只被一个点控制,没 ...

  9. qq空间爬取

    QQ_spider github传送门 QQ空间spider总结 花了将近3天吧,完成了低配版qq空间的爬虫,终于能上线刚一波了,还是蛮期待的. 流程很简单,模拟登录 ==>采集==>保存 ...

  10. Elasticsearch GC 时间过长的解决方法

    前言:GC 时间过长是个常见的问题,下文我将对应的现象和解决方案进行阐述.为什么这么解决,可以参考我的另外一个博客中的内存使用和GC指标这个章节 我们有时会发现elasticsearch集群挂掉,或者 ...