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. MyBatis框架——动态SQL、缓存机制、逆向工程

    MyBatis框架--动态SQL.缓存机制.逆向工程 一.Dynamic SQL 为什么需要动态SQL?有时候需要根据实际传入的参数来动态的拼接SQL语句.最常用的就是:where和if标签 1.参考 ...

  2. JS中 事件冒泡与事件捕获

    [JS中的事件流]  1.事件冒泡:当某DOm元素触发一种事件时,会从当前节点开始,逐级往上触发其祖先节点的同类型事件,直到DOM根节点:   >>>什么情况下会产生事件冒泡 ① D ...

  3. chrome保持元素hover，active状态

    审查元素,选中需要hover的标签 点击"Styles"菜单中的":hov",弹出 Force element state 选中相应的 :hover :acti ...

  4. Struts2中Action接收参数的方法

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt112 Struts2中Action接收参数的方法主要有以下三种: 1.使用A ...

  5. RSA算法介绍

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt279 2.1.1     算法实现 首先, 找出三个数, p, q, r,其 ...

  6. 【集美大学1411_助教博客】团队作业10——项目复审与事后分析（Beta版本）

    写在前面的话 软件工程课结束了,大家开心吗?是不是再也不用熬夜写代码了?如果这门课你真的熬夜写代码了,相信你一定有收获,如果这门课结束了你觉得是自己一个全新的开始,那么这门课的意义就实现了.团队作业全 ...

  7. 201521123118《java程序与设计》第七次作业

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 public bo ...

  8. HTML 自动、手动切换轮播 from：金水

    .自动.手动切换轮播 body代码: <div id="tuijian"> <div class="pages" id="p1&qu ...

  9. linux下svn命令大全(转）

    1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn://192.168.1.1/pro/domain 简写:s ...

  10. 从文本中读取内容并把读取到的内容转化成二进制保存的形式（包含十进制数如何转换成二进制数dtob函数）

    #include<stdio.h> #include<string.h> #include<stdlib.h> #include<malloc.h> d ...