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. Mysql分页处理（PageHelper）

    第一次做分页处理(完全不知道分页处理到底要做成什么样?) 理解:其实就是前台页面通过传递不同的参数{1.查询的条件.2.查询页数(pageNum),3每页展现的条数(pageSize)},之后我们(只 ...

  2. POJ3228 并查集或二分最大流枚举答案

    忘记写题意了.这题题意:给出每个地点的金矿与金库的数量,再给出边的长度.求取最大可通过边长的最小权值使每个金矿都能运输到金库里. 这题和之前做的两道二分枚举最大流答案的问法很相识,但是这里用最大流速度 ...

  3. jenkins+gitlab+sonar+testng构建持续集成测试环境（配置干货篇）

    几个工具的安装部分就不在此介绍了! jenkins配置: 1.插件安装 2.root私钥配置 3.构建job配置 4.部署job配置 5.测试job配置 7.jenkins全局工具配置 8.jenki ...

  4. FormData 上传多种格式的文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. 转：【Java并发编程】之七：使用synchronized获取互斥锁的几点说明

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17199201     在并发编程中,多线程同时并发访问的资源叫做临界资源,当多个线程同时访 ...

  6. ceph存储引擎bluestore解析

    原文链接:http://www.sysnote.org/2016/08/19/ceph-bluestore/ ceph后端支持多种存储引擎,以插件式的方式来进行管理使用,目前支持filestore,k ...

  7. 个人作业3——个人总结(Alpha阶段)

    个人总结 在Alpha冲刺阶段中,我们团队基本完成了项目的大致基础框架,还有很多不足需要更多的时间来让我们做得更好. 对我个人而言,Alpha冲刺阶段是一个强度很大的阶段,每天都在吸收新的知识,团队也 ...

  8. oop6 栈 界面

    作业要求 本次作业要求实现核心算法,请将表达式生成的代码及相关的检验.计算表达式结果的代码贴在博客中,并对代码进行必要的解释. 发表一篇博客,博客内容为:提供本次作业的github链接,本次程序运行的 ...

  9. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  10. 第07周-集合与GUI

    1. 本周作业简评与建议 本周8分以上的同学有32人(占1/4),其中9分以上的同学有13人(占1/10).大作业未完成的最高评分一般高于6分.被认定为抄袭的为-10分.请大家认真完成大作业,后面每周 ...