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. CSS中的路径裁剪样式clip-path

    前面的话 CSS借鉴了SVG裁剪的概念,设置了clip-path样式,本文将详细介绍路径裁剪clip-path 概述 clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区 ...

  2. Entity Framework Core Like 查询揭秘

    在Entity Framework Core 2.0中增加一个很酷的功能:EF.Functions.Like(),最终解析为SQL中的Like语句,以便于在 LINQ 查询中直接调用. 不过Entit ...

  3. 自制STP配置实验

    本图使用Gns模拟器 实验需求: 1.要求利用vtp实现vlan同步设置 2.要求vtp server实现备份冗余 3.创建vlan 1~10要求MLSW1 是奇数vlan主根 MLSW2 是偶数vl ...

  4. 提高SQL执行效率的16种方法

      项目中优化sql语句执行效率的方法:1)尽量选择较小的列2)将where中用的比较频繁的字段建立索引3)select子句中避免使用'*'4)避免在索引列上使用计算.not in 和<> ...

  5. 【Socket编程】通过Socket实现TCP编程

    通过Socket实现TCP编程 Socket通信 : 1.TCP协议是面向对象连接.可靠的.有序的,以字节流的方式发送数据. 2.基于TCP协议实现网络通信的类: 客户端----Socket类 服务器 ...

  6. 团队作业10——项目复审与事后分析（Beta版本）

    油炸咸鱼24点APP 团队作业10--事后诸葛亮分析; 团队作业10--Beta阶段项目复审;

  7. 团队作业4——第一次项目冲刺（Alpha版本）7th day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 在计时模式下能够记录用户的用户名和成绩,没有弄登录功能, 将程序定义为单机的 未完成的卡片为登录功能和使用QQ登录. 四.困难 ...

  8. Java-反射机制学习

    反射机制是Java的一个重要性,它使得Java语言具有了动态特性.比如说,可以在代码中动态地获取某个类的信息,生成它的实例.获取其成员变量.调用它的方法.下面通过几个示例来演示反射机制的作用与用法. ...

  9. 201521123096《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 (1)clone方法 1.1 Object ...

  10. Ubuntu下Java开发环境搭建(eclipse)

    最近把工作环境转移到了Ubuntu Kylin下,发现在这下面Java环境还是很方便的.然而也经历了一些摸索的过程,故作文以记之. 一/开发前准备 安装系统/配置软件源,这部分内容没什么需要注意的.O ...