1.属性介绍

perspective:800    平面距离三维中方框的距离

perspective-origin:50% 50%   表示从平面上哪个位置看三维图 ，相当于是X轴和Y轴，此时表示平面中心

2.transform属性

--translete :位移操作

translateX(X px)

translateY(Y px)

translateZ(Z px)

--rotate：旋转操作

rotateX(X deg)

rotateY(Y deg)

rotateZ(Z deg)

3.设置3D

transform-style:preserve-3d;

4.目前所有浏览器都不支持perspective属性，只有-webkit-支持~

5.简单的3D场景

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. #a{
  7. -webkit-perspective:800;
  8. -webkit-perspective-origin:50% 50%;
  9. -webkit-transform-style:-webkit-preserve-3d;
  10. }
  11. #b{
  12. width: 500px;
  13. height: 500px;
  14. background: blue;
  15. margin: 0 auto;
  16. -webkit-transform:rotateY(45deg);
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div id="a">
  22. <div id="b">
  23. </div>
  24. </div>
  25. </body>
  26. </html>

6.坐标轴的概念

坐标系原点在左上角



x轴的正方向是向右



y轴正方向是向下



z轴正方向是从屏幕到人的眼睛(垂直)



比如rotateX(80deg)和rotateX(-80deg)区别就是：从x轴正方向看向物体，80deg就是顺时针旋转了80度，-80deg就是逆时针旋转了80度

7.transform-origin:调整旋转中心

X轴：

left/center/right

Y轴：

top/center/bottom

Z轴：

length
px

CSS3之创建3D场景的更多相关文章

  1. css3创建3D场景

    浏览器本身是一个2维平面,对于3D的情况,实际上是增加了一个维度(深度),所以我们需要创建一个3D场景.这时浏览器不仅仅是一个平面了,更像是一个窗口,我们透过这个窗口去观察里面的三维世界.所谓的创建3 ...

  2. css3实践—创建3D立方体

    css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...

  3. 和我一起学 Three.js【初级篇】：1. 搭建 3D 场景

    欢迎关注「前端乱步」公众号,我会在此分享 Web 开发技术,前沿科技与互联网资讯. 0. 系列文章合集 本系列第 6,7 章节支持微信公众号内付费观看,将在全系列文章点赞数+评论数 >= 500 ...

  4. Python>>>创建一个简单的3D场景

    首先安装PyOpengl pip install PyOpenGL PyOpenGL_accelerate

  5. 第一章 用three.js创建你的第一个3D场景

    第一章 用three.js创建你的第一个3D场景 到官网下载three.js的源码和示例. 创建HTML框架界面 第一个示例的代码如下: 01-basic-skeleton.html 位于 Learn ...

  6. Three-js 创建第一个3D场景

    1.一个场景至少需要的三种类型组件 相机/决定哪些东西将在屏幕上渲染    光源/他们会对材质如何显示,以及生成阴影时材质如何使用产生影响    物体/他们是在相机透视图里主要的渲染队形:方块.球体等 ...

  7. Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景

    Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...

  8. 使用three.js创建3D机房模型-分享一

    序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的 ...

  9. Ngui 五种点击事件实现方式及在3d场景中点透的情况

    http://www.unity蛮牛.com/thread-22018-1-1.html ngui作为unity界面插件之一中,无疑是最好用,使用最多的了从自学unity到现在界面一直使用它 由于它的 ...

  10. [Unity3D]Unity3D游戏开发之在3D场景中选择物体并显示轮廓效果

    大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei. 在<仙剑奇侠传>.<古剑奇谭>等游戏中,常常须要玩家在一个3D场景中 ...

随机推荐

  1. 数据挖掘18大算法实现以及其他相关经典DM算法：决策分类，聚类，链接挖掘，关联挖掘，模式挖掘。图算法，搜索算法等

    数据挖掘18大算法实现以及其他相关经典DM算法:决策分类,聚类,链接挖掘,关联挖掘,模式挖掘.图算法,搜索算法等 算法码源见文末 1.算法目录 18大DM算法 包名 目录名 算法名 Associati ...

  2. ASP.NET Core 6框架揭秘实例演示[41]：跨域资源的共享（CORS）花式用法

    同源策略是所有浏览器都必须遵循的一项安全原则,它的存在决定了浏览器在默认情况下无法对跨域请求的资源做进一步处理.为了实现跨域资源的共享,W3C制定了CORS规范.ASP.NET利用CorsMiddle ...

  3. 【技术积累】Mysql中的SQL语言【技术篇】【一】

    数据库管理操作 创建一个新的数据库 要在MySQL中创建一个新的数据库,可以使用CREATE DATABASE语句.以下是创建新数据库的SQL语句及其解释: SQL语句: CREATE DATABAS ...

  4. 学习 HBase

    1 由来 HBase 应大数据而生,是Apache Hadoop项目孵化而来的一种NoSQL数据库,HBase 是 Hadoop Database 的简称. 它的出现有以下几个原因: 大数据时代的到来 ...

  5. shell 默认参数

    #!/bin/bash dst_dir=${2:-/tmp} # 当 $2 为空或null时,设置默认值. docker cp prometheus:$1 $dst_dir

  6. 【Oracle】 instr函数与substr函数以及自制分割函数

    Oracle instr函数与substr函数以及自制分割函数 instr通常被用来作为判断某个字符串中是否含有执行字符串和将返回结果作为一些数据分割的数据,即有模糊查询like的作用,当返回的查询结 ...

  7. html5 2.0学习

    列表定义:是一种特别的对象集合.集合:集中在一起合二为一(聚集). 聚集:多个列(信息资源)排在一起.信息资源:一堆数据,可能是字符,可能是图片. 列表分类:有序列表 无序列表  (自)定义列表  有 ...

  8. Git Cherry-pick使用

    概述 无论项目大小,当你和一群程序员一起工作时,处理多个 Git 分支之间的变更都会变得很困难.有时,与其把整个 Git 分支合并到另一个分支,不如选择并移动几个特定的提交.这个过程被称为 " ...

  9. 系统内存管理：虚拟内存、内存分段与分页、页表缓存TLB以及Linux内存管理

    虚拟内存 虚拟内存是一种操作系统提供的机制,用于将每个进程分配的独立的虚拟地址空间映射到实际的物理内存地址空间上.通过使用虚拟内存,操作系统可以有效地解决多个应用程序直接操作物理内存可能引发的冲突问题 ...

  10. GaussDB技术解读系列：高安全之密态等值

    本文分享自华为云社区< DTCC 2023专家解读 | GaussDB技术解读系列:高安全之密态等值>,作者:GaussDB 数据库. 近日,在第14届中国数据库技术大会(DTCC2023 ...