html中3d哪个方向是x轴,浅谈css 3d与空间坐标轴
今天来给大伙好好说说,这css 3d应该如何使用,以及相关的空间坐标轴的知识。感兴趣的朋友来了解一下,希望对你有所帮助。
先上效果图:
基本思路:三层结构:视角容器>>载体>>具体3d图像。
视角容器:决定3d的呈现效果,这里的pespective属性接收参数为像素,perspective的值越大,代表“眼睛离观察物越远”,值越小,代表“眼睛越靠近观察物”
缺少perspective属性,将无法调整观测的视角。
载体:支持承载3d图像
这个载体跟普通的html标签最大的区别在于它多了一个属性:transform-style:preserve-3d。表示它支持3d图像显示。
如果缺少了这个属性,进行过3d转换的3d图形们将被压在一个2d平面内,无法呈现出3d效果,因为容器都是扁的,即使内容是3d的也于事无补。
具体3d图像:从2d到3d的转换
这里的3d图像都是由2d平面图像转换而来,那么如何转换呢。需要用到translateX,translateY,translateZ属性,当然简写也就是translate-3d,还有rotateX,rotateY,rotateZ等到。而translate(平移),rotate(旋转)的具体规则,都是基于下方这幅著名的参考图:三维坐标图进行的。
首先说translate的规则,这个自然不必多说,对照着看就可以了,比如说translateZ(-100px)在这幅图中就相当等于图像往-z轴的方向移了100px,形象一点的说法就是“向屏幕内部凹陷了100px”。translateX,translateY以此类推。
难点在rotate,告诉大家一个很简单的判断法则:正向轴对着眼睛,顺时针则旋转角度为正,逆时针则旋转角度为负。
或者用左手法则也行:伸出左手,大拇指指向正轴方向,四个手指的指向即是旋转正向,但务必记住是左手!
左手哥镇场:
就是这么简单,比如现在我们要制作一个3d骰子,首先六个平面图都如上图所示摆在三维坐标系的中心店,他们的大小都跟载体一样,要变成一个骰子,需要做如下变换:
(注:载体和6个面的长宽均为200px)
对照着3d图,大家比划比划就知道怎么回事了。
附上全部源码:
.box {
width: 100%;
height: 100%;
perspective: 500px;
}
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
color: #ff92ff;
font-size: 36px;
font-weight: 100;
text-align: center;
line-height: 200px;
transform-style: preserve-3d;
transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);
// animation: move 8s infinite linear;
@keyframes move {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);
}
}
div {
position: absolute;
width: 100%;
height: 100%;
border: 10px solid #66daff;
border-radius: 20px;
background-color: rgba(51, 51, 51, 0.3);
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
}
}
希望本文对你有所帮助。
html中3d哪个方向是x轴,浅谈css 3d与空间坐标轴相关推荐
- php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上,如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上 如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
- python中gil锁和线程锁_浅谈Python中的全局锁(GIL)问题
CPU-bound(计算密集型) 和I/O bound(I/O密集型) 计算密集型任务(CPU-bound) 的特点是要进行大量的计算,占据着主要的任务,消耗CPU资源,一直处于满负荷状态.比如复杂的 ...
- css中字体下划线样式,css下划线 浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
- html 怪异模式,CSS_浅谈CSS编程中的怪异模式,怪异模式盒模型
今天学习了 - phpStudy...
浅谈CSS编程中的怪异模式 怪异模式盒模型 今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共 ...
- directui 3d界面引擎_美术设计师浅谈AR/VR中3D建模设计的工具、挑战与区别
(映维网 2019年04月20日)3D越来越受欢迎,并对每个人的生活都产生了影响.从建筑到娱乐,许多不同的领域都有利用3D技术.例如詹姆斯·卡梅隆的<阿凡达>,这部电影给我们带来了前所未有 ...
- 中职学校计算机专业的论文,浅谈中职计算机专业教学改革思考论文
浅谈中职计算机专业教学改革思考论文 一.中职计算机专业教学改革的具体办法 (一)提升教师教学理念,转换教师教学角色 要想实现中职计算机教学的有效性,其最有效的学习方法就是要让学生亲自在体验和创造的过程 ...
- 中职学校计算机应用基础学什么,浅谈中职学校《计算机应用基础》课程改革的一点建议...
<浅谈中职学校<计算机应用基础>课程改革的一点建议>由会员分享,可在线阅读,更多相关<浅谈中职学校<计算机应用基础>课程改革的一点建议(3页珍藏版)>请 ...
- python中if和elif的区别_浅谈对python中if、elif、else的误解
今天下午在练习python时用了"if...if...else..."的分支结构,结果运行出来吓我一跳.原来我想当然的认为"if...if...else..." ...
- java中的强制类型转换注意事项_浅谈Java中强制类型转换的问题
为了更好的理解我们先看下面的例子: package com.yonyou.test; import java.util.ArrayList; import java.util.Iterator; im ...
最新文章
- Airlaunch 快捷设置代码分享
- UML建模系列文章总结
- 2012年企业Web应用安全防范与趋势展望
- 《Linux内核设计与实现》读书笔记(二十)- 补丁, 开发和社区
- nginx的模块开发
- java单例代码_java中的单例模式的代码怎么写
- 如何在C++中调用C程序?
- python3(十)pickle库
- 使用zipKin构建NetCore分布式链路跟踪
- 理解Python闭包,这应该是最好的例子
- Java调用cplex求解泊位分配模型_修正重发【CPLEX教程03】JAVA调用cplex求解一个TSP模型详解...
- 笔记本键盘按键拆卸教程
- 虚拟服务器怎么选操作系统,虚拟主机怎样选择合适的操作系统
- 联想服务器安装win10系统安装教程,联想笔记本安装win10系统图文教程
- C语言中ret的作用,c-RET抑制剂 | c-RET Inhibitor
- 妹子图APP(一)—— Retrofit+Glide+Gson加载网络图片
- win7屏幕亮度怎么调_win7屏幕亮度调整方法
- 最新------如何不通过AppStore,直接安装IOS应用程序 兼容最新版IOS系统
- 必须了解的待人处事小技巧
- 洛谷-P2006 赵神牛的游戏