theme: cyanosis
highlight: a11y-light

移动

移动Web第二天—空间转换

空间转换

目标：使用transform属性实现元素在空间内的位移，旋转，缩放效果

空间：是从坐标轴定义的。x,y,z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform

空间位移

目标：使用transform实现元素空间位移效果

语法
- transform：translate3d(x,y,z);
- transform：translateX(值px 或者百分比); 向X轴位移 X要大写取值正负都可
- transform：translateY(值px 或者百分比);
- transform：translateZ(值px 或者百分比);
透视

目标：使用perspective属性实现透视效果
- l思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
  
  答：近大远小、近清楚远模糊
- 思考：默认情况下，为什么无法观察到Z轴位移效果？
  
  答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果
  
  例如：就像一个盒子，从正面观察它是看不到的长度的跟小学的从正面侧面观察正方体一样
**

使用perspective：值 800-1200px

给其父级添加

，…perspective只增加近大远小、近实远虚的视觉效果。

空间旋转

目标：使用rotate实现元素空间旋转效果

语法

transform:rotateZ(值)；
transform:rotateY(值);
transform:rontate(值)；

左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

拓展

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字

立体呈现

目标：使用transform-style:preserve-3d呈现立体图形

实现方法：

添加transform-style:preserve-3d
使子元素处于真正的3d空间
呈现立体图形步骤
1. 盒子父级添加transform-style:preserve-3d;
2. 按需求设置盒子的位置(位移或旋转)

使用transform-style属性实现立方体案例

思路：

定一个父盒子box包装着6个小平面
使用定位把六个面叠在一起，并给每个面设置不同的颜色
使用空间变换来实现立方体，就是吧每个没移到对应的位置
- 前： z轴正移动 +100
- 后： z轴负移动 -100
- 左： x轴负移动 -100 y轴旋转 90deg
- 右： x轴正移动 100 y轴旋转 90deg
- 上： y轴负移动 -100 x轴旋转 90deg
- 下： y轴正移动 100 x轴旋转 90deg

给box开启立体效果，并旋转box查看效果

使用transform-style属性实现立方体案例

代码如下：

<title>立方体案例</title><style>.box{width: 300px;height: 300px;background-color:pink;margin: 100px auto;position: relative;        }div{position: absolute;left: 0;top: 0;width: 100%;height: 100%;/* 开启3d效果 */transform-style:preserve-3d ;transform:rotate3d(1,1,1,30deg);}.top{background-color:red;transform: translateY(-150px) rotateX(90deg);}.bottom{background-color:green;transform: translateY(150px) rotateX(90deg);}.left{background-color:blue;transform:translateX(-150px) rotateY(90deg)  ;}.right{background-color:yellow;transform: translateX(150px) rotateY(90deg);}.qian{background-color:tomato;/* 前后是z轴运动 */transform: translateZ(150px);}.hou{background-color:springgreen;transform: translateZ(-150px);}</style>
</head>
<body><!-- 先来个大盒子 --><div class="box"><div class="top">上</div><div class="bottom">下</div><div class="left">左</div><div class="right">右</div><div class="qian">前</div><div class="hou">后</div></div>
</body>

效果如下：

移动Web 第二天# 空间位移和立体图形的基本知识相关推荐

移动Web【空间转换[空间位移、透视、空间旋转、立体呈现、3D导航、空间缩放]、动画、综合案例】
文章目录一.空间转换 1.1 空间位移 1.2 透视 1.3 空间旋转 1.4 立体呈现 1.5 3D导航 1.6 空间缩放二.动画 2.1 动画的实现步骤 2.2 动画属性三.综合案例 2.1 ...
web移动中空间转换与动画
一,空间转换 1空间转换使用transform属性实现元素在空间内的位移.旋转.缩放等效果 x .y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同. 2空间位移语法transform: ...
2.1 空间向量与立体解析几何
第二章线性代数全文均为手敲,如果发现有误,请于评论区交流讨论留言,作者会及时修改 2.1 空间向量与立体解析几何三维向量的点积与叉积设 a = ( a 1 , a 2 , a 3 ) , b ...
STL源码剖析（第二章空间配置器）
1.1 空间配置器以STL的实现角度而言,第一个需要介绍的就是空间配置器,因为整个STL的操作对象(所有的数值)都存放在容器之内,而容器一定需要配置空间以置放资料.并且allocator称之为&qu ...
HTML+CSS：transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放
文章目录 transform: translate3d(x, y, z) 使用perspective属性实现透视效果 transform: rotateXYZ实现元素空间旋转效果 transform- ...
立体图形3D动画和绘制
做了一个关于立体图形3D动画和绘制图形的例子,效果如下: 这个是参照苹果官方文档和例子来写的,其中茶壶是根据点.颜色渲染.网格结构和灯光效果来绘制出来的. 再说实现步骤前我们需要了解一下概念: GLK ...
Android开发之 OpenGL ES系列（5--3D立体图形）
OpenGL ES系列(5--3D立体图形) 转自:http://www.guidebee.info/wordpress/archives/1554 前面的例子尽管使用了OpenGL ES 3D图形库 ...
关于立体图形切n刀最多切多少块的结论及推导
思路主要参照了知乎这个话题下德安城和安堇然的回答.自己再写一遍主要是为了加深理解. 首先直接给出结论: 在d维空间内,对于被切中的d维立体,每一刀将造成d-1维的划痕,将该d维立体分成两部分,则切n刀 ...
【愚公系列】2022年09月微信小程序-WebGL立体图形的绘制
文章目录前言一.webgl的使用 1.立体图形的绘制二.相关包源码三.总结前言 WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaS ...

移动Web 第二天# 空间位移和立体图形的基本知识

theme: cyanosis
highlight: a11y-light

移动Web第二天—空间转换

空间转换

空间位移

透视

空间旋转

立体呈现

移动Web 第二天# 空间位移和立体图形的基本知识相关推荐

最新文章

热门文章

移动Web 第二天# 空间位移和立体图形的基本知识

theme: cyanosis highlight: a11y-light

移动Web第二天—空间转换

空间转换

空间位移

透视

空间旋转

立体呈现

移动Web 第二天# 空间位移和立体图形的基本知识相关推荐

最新文章

热门文章

theme: cyanosis
highlight: a11y-light