html部分

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>3D模型</title>

        <link rel="stylesheet" href="css/style.css">

    </head>

    <body>

        <div class="camera">

            <div class="stage">

                <div class="cube up">up</div>

                <div class="cube down">down</div>

                <div class="cube left">left</div>

                <div class="cube right">right</div>

                <div class="cube font">font</div>

                <div class="cube after">after</div>

            </div>

        </div>

    </body>

</html>

css部分

.camera

{

    width:500px;

    height:500px;

    perspective:1000px; //相机距离

    perspective-origin:center center;//相机位置

    /*border:1px dashed black;*/

}

.stage

{

    border:1px dashed blue;

    width:100%;

    height:100%;

    transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);

    //绕X/Y/Z轴旋转，度数你自己写

    transform-style:preserve-3d; //3D模型

}

.cube //6个面共同设置

{

    width:200px;

    height:200px;

    border:1px dashed blue;

    margin-top: 100px;

    margin-left: 100px;

    position:absolute;

}

.up

{

    background-color: red;

    transform:rotateX(90deg) translateZ(100px); //旋转,平移

}

.down

{

    background-color:blue;

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

}

.left

{

    background-color:green;

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

}

.right

{

    background-color:orange;

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

}

.font

{

    background-color:rgb(237,21,162);

    transform:translateZ(100px);

}

.after

{

    background-color:rgb(21,234,237);

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

}

CSS3D模型的更多相关文章

  1. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  2. ASP.NET Core MVC/WebAPi 模型绑定探索

    前言 相信一直关注我的园友都知道,我写的博文都没有特别枯燥理论性的东西,主要是当每开启一门新的技术之旅时,刚开始就直接去看底层实现原理,第一会感觉索然无味,第二也不明白到底为何要这样做,所以只有当你用 ...

  3. ASP.NET路由模型解析

    大家好,我又来吹牛逼了 ~-＿-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...

  4. 高性能IO模型浅析

    高性能IO模型浅析 服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-blocking  ...

  5. 探索ASP.NET MVC5系列之~~~4.模型篇---包含模型常用特性和过度提交防御

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  6. 隐马尔科夫模型python实现简单拼音输入法

    在网上看到一篇关于隐马尔科夫模型的介绍,觉得简直不能再神奇,又在网上找到大神的一篇关于如何用隐马尔可夫模型实现中文拼音输入的博客,无奈大神没给可以运行的代码,只能纯手动网上找到了结巴分词的词库,根据此 ...

  7. webapi - 模型验证

    本次要和大家分享的是webapi的模型验证,讲解的内容可能不单单是做验证,但都是围绕模型来说明的:首先来吐槽下,今天下午老板为自己买了套新办公家具,看起来挺好说明老板有钱,不好的是我们干技术的又成了搬 ...

  8. 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  9. 【NLP】蓦然回首：谈谈学习模型的评估系列文章（一）

    统计角度窥视模型概念 作者:白宁超 2016年7月18日17:18:43 摘要:写本文的初衷源于基于HMM模型序列标注的一个实验,实验完成之后,迫切想知道采用的序列标注模型的好坏,有哪些指标可以度量. ...

随机推荐

  1. C++与类型转换相关的四个关键字及其特点

    1.reinterpret_cast (expression) type-id 必须是一个指针.引用.算术类型.函数指针或者成员指针. 它可以把一个指针转换成一个整数,也可以把一个整数转换成一个指针( ...

  2. HTML5新增属性data-*和js/jquery之间的交互

    HTML5新增属性data- data-自定义属性,这种方式的自定义属性解决属性混乱无状态管理的现状 书写实例 <div data-role="page" data-last ...

  3. 页面性能优化和高频dom操作

    一.DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如下几点: 访问和修改DOM元素 修改DOM元素的样式,导致重绘或重排 通过对DOM元素的事件处理,完成与用 ...

  4. MongoDB学习之路(三)

    数据库 一个MongoDB可以建立多个数据库. MongoDB的默认数据库为"db",该数据库存储在data目录中. MongoDB的单个实例可以容纳多个独立的数据库,每一个都有自 ...

  5. The Last

    第八次课程作业 感慨 没想到这就最后一次课程作业了,还以为会跟我到大学毕业呢.既然是最后一次就说说心里话.起初收到做博客作业的消息还觉得蛮有新意的(因为第一次作业不难),后来不断的作业涌现出来了,还都 ...

  6. 团队作业9--测试与发布（Beta版）

    Beta版本测试报告 1.在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个? a. 修复的bug: 写入SD存储卡文件权限问题 页面正确跳转 及 部分页面闪退的问题 b. 不能重现的bu ...

  7. 201521123072《Java程序设计》第6周学习总结

    201521123072<Java程序设计>第6周学习总结 标签(空格分隔): java 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画 ...

  8. 201521123060《Java程序设计》第1周学习总结

    1. 本章学习总结 认识和了解了Java的发展进程: 了解了相关开发工具: 认识了JVM,JRE,JDK: 2. 书面作业 Q1.为什么java程序可以跨平台运行?执行java程序的步骤是什么?(请用 ...

  9. 201521123081《java程序设计》 第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  10. 201521123071 《JAVA程序设计》第九周学习总结

    第九周-异常 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 此处仅部分知识点归纳 2. 书面作业 1. 常用异常,题目5-1 1.1 截图你的提交结果(出现学号) ...