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. carry-检查数据接口返回数据合法性

    问题背景: 在测试&部署监控过程中,我们常常会遇到外部接口返回数据不靠谱的时候.最常见的场合是从某个http获取如json和xml等结构化的结果,进行解析并处理,在这时候出现以下这几种常见类型 ...

  2. adb命令安装apk 来学习吧

    1.将需要安装的apk放在platform-tools下 2.将手机和电脑连接,在cmd中输入 adb devices查看 3.使用adb命令安装apk,在cmd中输入:adb install apk ...

  3. 【转载】js常用方法和片段

    在网上看了不少js方法的总结没,自己也尝试总结过,这篇只迄今为止觉得最清楚的,尤其是call和apply的方法总结,很到位!! 1.javascript删除元素节点 IE中有这样一个方法:remove ...

  4. stylus选中hover元素的兄弟元素下的子元素

    stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...

  5. 闲话和grunt

    一年半没更新是因为自己转岗了,android framework+system转前端,可以想象过程之苦逼,苦成了一首诗:很烦很烦/非常烦/非常非常十分烦/特别烦特烦/极其烦/贼烦/简直烦死了/啊——. ...

  6. Git简易参考手册

    如果用过mercury(HG),那么理解Git的运作方式就轻松多了.两者是相同的分布式版本管理工具,只是某些功能有着细微的差别 - Git的管理粒度更加细腻,因此操作上也比HG复杂一点.例如,修改文件 ...

  7. 关于selenium IDE找不到元素

    selenium IDE ,明明存在元素,却找不到元素 ,报错Element not found 标签: seleniumselenium IDE自动化测试ide 2016-10-31 13:25 1 ...

  8. 三种计算c#程序运行时间的方法

    三种计算c#程序运行时间的方法 第一种: 利用 System.DateTime.Now // example1: System.DateTime.Now method DateTime dt1 = S ...

  9. 半个月学习的it内容

    1  基本头部标签: 1 head: HEAD里面主要放一些有关网页设置的相关语句-->2编码格式: 设置网页的字符集编码格式:GB2312,简体中文的编码格式 GBK:扩展的国标码,比国标码多 ...

  10. 201521123084 《Java程序设计》第4周学习总结

    第4周作业-面向对象设计与继承 1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 总结: (1)学会了如何给类和方法进行简单的注释: (2)学 ...