接着上一篇博客的内容顺藤摸瓜往下想，既然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. php中获取数据 php://input、$_POST与$GLOBALS['HTTP_RAW_POST_DATA']三者的区别

    $_POST 只有Coentent-Type的值为application/x-www.form-urlencoded和multipart/form-data两种类型时,$_POST才能获取到数据. $ ...

  2. mysql 数据表备份导出，恢复导入操作实践

    因为经常跑脚本的关系, 每次跑完数据之后,相关的测试服数据库表的数据都被跑乱了,重新跑脚本恢复回来速度也不快,所以尝试在跑脚本之前直接备份该表,然后跑完数据之后恢复的方式,应该会方便一点.所以实践一波 ...

  3. spring学习总结(一)_Ioc基础(下)

    本篇文章继续上篇文章讲解Ioc基础,这篇文章主要介绍零配置实现ioc,现在相信大家项目中也基本都是没有了xml配置文件.废话不多说.一起学习 代码示例 BookDao.java package com ...

  4. loadrunner基础学习笔记四

    在loadrunner中,通过将一系列操作标记为事务,可以将它们指定为要评测的操作. loadrunner收集关于事务执行时间长度的信息,并将结果显示在用不同单色标识的图和报告中. 可以这些信息了解应 ...

  5. jmeter创建高级测试计划

    如果应用程序使用重写地址而不是使用cookie存储信息,需要做一些额外的工作去测试程序 为了正确的响应重写地址,jmeter 需要解析 从服务器获取html 并且检索会话ID, 1 合理利用pre-p ...

  6. python之Counter类：计算序列中出现次数最多的元素

    Counter类:计算序列中出现次数最多的元素 from collections import Counter c = Counter('abcdefaddffccef') print('完整的Cou ...

  7. 当你觉得大学没学到Linux时的感想

    你的大学生活是什么样的呢?你在大学有学到特殊的技能吗?你可以在大学毕业的时候找到一份满意的工作吗?当这些问题摆在你面前的时候,你会迷茫吗,绝大多数的人在毕业的时候并不能找到一份好的工作,那不是因为你的 ...

  8. JSON：如果你愿意一层一层剥开我的心，你会发现...这里水很深——深入理解JSON

    我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题,请问,以下JS对象通过JSON.stringify后的字符串是怎样的?先不要急着复制粘贴到控制台,先自己打开一个代码编辑器或者纸,写写看 ...

  9. filebeat 配置文件参数

      filebeat 配置 所有的 beats 组件在 output 方面的配置都是一致的,之前章节已经介绍过.这里只介绍 filebeat 在 input 段的配置,如下: filebeat: sp ...

  10. fio 磁盘性能

    /fio -ioengine=libaio -bs=32k -direct=1 -thread -rw=randrw -percentage_random=100,0 -size=10G -filen ...