html 3d坐标,HTML3D
一、什么是3D
3D是css3新增的属性,增强了css对元素控制的能力。3D相对于2D多出一个Z轴。Z轴可以理解为垂直于屏幕的方向,靠近屏幕的方向是正向,远离与屏幕的方向是反向。
二、3D属性
1、transform-style 属性
指定嵌套元素如何在3D空间中呈现。属性值有 flat 和 preserve-3d。
flat为默认值。
preserve-3d表示所有子元素都在3D空间中呈现。所以此属性是添加在父元素身上。
2、3D位移
位移主要包括translateZ()和translate3d()。translate3d()使一个元素在三维空间中运动。
语法translate3d(tx,ty.ty)
tx::代表横向坐标方向移动。
ty:代表纵向坐标方向移动。
tz:代表Z轴位移向量的长度。此值不能是一个百分比值,如果取值为百分比值,将会认为无效值。
translateZ(t) 指的是Z轴的向量长度。
3、3D旋转
rotateX():指定 一个元素围绕X轴旋转,旋转的量被定义为指定的角度。如果为正值绕X轴顺时针旋转,如果为负值绕X轴逆时针旋转。
,rotateY():指定 一个元素围绕Y轴旋转,旋转的量被定义为指定的角度。如果为正值绕Y轴顺时针旋转,如果为负值Y轴逆时针旋转。
rotateZ():指定 一个元素围绕Z轴旋转,旋转的量被定义为指定的角度。如果为正值绕Z轴顺时针旋转,如果为负值Z轴逆时针旋转。
旋转单位为 deg
4、3D缩放
CSS3中的3D缩放主要包括scaleZ()。
scaleY(),scaleX()用法与2D用法一致。
5、深景
属性值:perspective:value;(加在父元素上)
生活中看物体都会有近大远小的效果。这就是3D和2D存在区别的地方。value值越大近大远小的效果就会更加明显。
三、纯css实现【正方体的书写】
CSS部分:
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
height: 200px;
/*border: 1px solid;*/
margin: 100px auto;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
position: relative;
animation: ro 3s infinite linear;
}
ul li{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
position: absolute;
list-style: none;
}
ul li:nth-child(1){
background: red;
transform: rotateX(90deg) translateZ(100px);
}
ul li:nth-child(2){
background: yellow;
transform: rotateX(180deg) translateZ(100px);
}
ul li:nth-child(3){
background: pink;
transform: rotateX(270deg) translateZ(100px);
}
ul li:nth-child(4){
background: plum;
transform: rotateX(360deg) translateZ(100px);
}
ul li:nth-child(5){
background: greenyellow;
transform: translateX(-100px) rotateY(90deg) ;
}
ul li:nth-child(6){
background: blue;
transform: translateX(100px) rotateY(90deg) ;
}
@keyframes ro{
from{transform: rotateX(-20deg) rotateY(0deg);}
to{transform: rotateX(-20deg) rotateY(360deg);}
}
HTML部分:
- *6
html 3d坐标,HTML3D相关推荐
- OpenGL: 3D坐标到屏幕坐标的转换逻辑(gluProject的实现)(转)
OpenGL: 3D坐标到屏幕坐标的转换逻辑(gluProject的实现) 遇到需要将3D坐标转换到屏幕坐标的问题,在网上很多朋友也在寻找答案,下面是glu中gluProject函数的实现.(实际上就 ...
- 将3D坐标转成2D坐标的方法
将3D坐标转成2D坐标的方法.3D坐标在Unity中称作World Space,2D坐标称作Screen Space, 是以pixel为基准,以iPad 1024 x 768(4:3)的解析度为例子: ...
- html 3d坐标,CSS3三维变形,transform,3D,视角知识
CSS3-3D相关知识详解-视角以及变形方向 HTML5学堂:视角以及变形方向.HTML5中非常不错的一个变革,便是将特效从二维平面上的变化,推进到了三维立体当中.而实现这个的功能就是CSS3!对于三 ...
- Solidworks二次开发-3D坐标转2D坐标
一.3D坐标转2D坐标指在零件层面获得的点坐标,在进入草图编辑状态时,该点转换为在草图中的坐标值,只有XY轴: 注:如需将装配体层面的坐标转换为零件草图的坐标,需先将绝对坐标转换为零件的相对坐标,然后 ...
- 3D坐标绕轴旋转公式推导
绕轴旋转实际上等价于平面点绕远点旋转,所以这里只用分析一下平面情况就可以. 问题转换为:平面上任意点(x,y)绕原点旋转R度后,新点坐标为多少? 一. 通常情况,我们容易想到一下的推导方式(我一开始想 ...
- three.js 3D坐标转化为2D屏幕坐标
//创建一个3D坐标 var vector = new THREE.Vector3(); //获取模型 var obj = scene.getObjectByName(modelName); vect ...
- C语言找人物坐标,CE找游戏人物3D坐标 | 手游网游页游攻略大全
发布时间:2016-08-25 梦幻西游手游春节灯笼怎么找 春节灯笼坐标位置攻略.梦幻西游手游春节活动要求我们找到春节灯笼,下面小编给大家带来梦幻西游手游春节灯笼位置介绍,需要的玩家快来看看吧. 活动 ...
- html 3d坐标,3d transform的坐标空间及位置_html/css_WEB-ITnose
css里的3d理念 使用css3的3d transform,就可以在平面的网页里添加炫酷的三维视觉效果,这很令人愉悦. 需要注意的是,3d transform只是css的一部分,它并不是一个三维引擎( ...
- 相机3D坐标到机械臂坐标的转换
本程序原理简单,就是RX+T,为了测试方便记录于此 已知 1.3D相机和机械臂进行了标定,得到3*4的刚体矩阵; 2.使用3D相机对物体进行拍摄,取其中1个坐标点P(x,y,z); 求 : 该坐标点P ...
最新文章
- 中国电子学会青少年编程能力等级测试图形化四级编程题:抽奖
- oracle catalog start with,rman中进行catalog start with 无法注册部分备份文件
- SharePoint基础之九- Site Page与Application Page
- 反思技术面试题目准备汇总链接汇总
- vuecli启动的服务器位置,在vue cli 3生成的项目中启动dev服务器
- [css] 怎么设置可点击的元素上强制手型?
- 以jieba为首的主流分词工具总结
- (31)FPGA原语设计(IBUFG)
- dos命令窗口光标闪烁_史上最全的Vim命令(二)
- Log4J 最佳实践之全能配置文件
- 【相机标定系列】标定工具仓库
- automake生成静态库文件_gcc编译工具生成动态库和静态库之一----介绍
- DB2数据库错误代码大全
- MFC实现点击按钮打开一个指定的文件或者网址或者exe
- 图灵大会圆满落幕,码隆科技与全球最强大脑同台
- PYTHON爬虫——谷歌(Google)图片关键词爬取
- DNS区域(ZONE)相关概念
- 9.后缀、前缀函数-suffix basename addsuffix addprefix
- 外国人喜欢问中国人的大问题
- 2019年清华计算机系本校保研推免机考题目
热门文章
- BI报表系统在银行业的应用
- 【转】【51CTO 网+】怎样做一款让用户来电的产品
- WPF之Binding的三种简单写法
- IOS第五天(2:用户登录,回车的监听(代理模式UITextFieldDelegate)) 和关闭键盘
- sharepoint_study_7
- log4net 日志跟踪
- Win10下python不同版本同时安装并解决pip共存问题
- 全球首发!惯性导航导论(剑桥大学)第六部分
- 【文末福利】算法大赛评委共话技术趋势,这场直播值得一看!
- 1024当当限量优惠码!花150买400的书,花220买600的书!