「移动设备陀螺仪」与「preserve-3d」碰撞的火花

jsyzchen 发布于2019-08-22 13:53 / 812人阅读

摘要：它描述的是设备由前向后旋转的情况。表示设备沿轴上的旋转角度，范围为度。完整的代码大概是这样庆祝时刻现在我们已经完成了，一个利用移动设备陀螺仪与实现的交互效果。

原文链接：航洋 blog

「移动设备陀螺仪」与「preserve-3d」碰撞的火花

涉及知识「CSS：transform、JS：deviceorientation」

废话不多，先上 DEMO「请使用移动设备查看」

如何搭建一个简单的立方体

只需要寥寥几行 HTML、CSS 代码就能产出一个「立方体」

核心 HTML 如下

CSS 第一步

.cube {
  width: 160px;
  height: 160px;
  position: relative;
  -webkit-transform-style: preserve-3d; /* 这一句重点 */
  transform-style: preserve-3d;
  -webkit-transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
.cube-face {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 4px 1px #fff;
  box-sizing: border-box;
  background: -webkit-linear-gradient(45deg, rgba(156, 144, 144, .6), #000);
  background: -o-linear-gradient(45deg, rgba(156, 144, 144, .6), #000);
  background: linear-gradient(45deg, rgba(156, 144, 144, .6), #000)
}

这个 CSS 过于简单，就不赘述与解释。
主要是要设置父元素 .cube 的 transform-style: preserve-3d，
使子元素位于 3D 空间中，不然子元素都是「平面内、扁平化」，达不到 3D 效果。

给所有子元素 .cube-face 设置了透明的渐变色 rgba(156, 144, 144, .6) 背景，
是为了更好的观察到「被遮住的反面」，视觉上更加立体

目前效果截图大概是这个样子：

看起来就像一个正方形，其实是 6 个面全部重叠在一起。

CSS 第二步

.cube-front {
  -webkit-transform: translateZ(80px);
  transform: translateZ(80px);
}

上面 4 行代码使得「正面 .cube-front」向前移动 80px「也就是立方体一半的边长」。
同理我们可以设置「背面 .cube-back」向后移动 80px
效果大概是这样：

CSS 第三步

.cube-left {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

上面 4 行代码使得「左面 .cube-left」先顺时针旋转「90 度」
大概是这个样子：

然后再向「左边」移动 80px 就 OK 啦，
注意：左边是 Z 轴负方向。

.cube-left {
  -webkit-transform: rotateY(90deg) translateZ(-80px);
  transform: rotateY(90deg) translateZ(-80px);
}

大概是这个样子：

同理，我们可以做出右边的效果，唯一区别就是，右边移动方向与左边相反。
道理类似，异曲同工，上边和下边，想必聪明的大家都掌握了正确写法姿势。

成品大概是这个样子：

用陀螺仪使立方体动起来

细心的开发者应该发现了，在最开始，我给父元素 .cube 设置了：
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg)
认让父元素在三维空间上旋转 10 度。
如果我们动态连续修改这三个值，绝对可以达到 3D 旋转动画的效果。

这个时候，JS 的 deviceorientation「检测设备方向」事件闪现突然闪现在我的脑海。
因为这个事件的回调参数里面恰好有三个参数「beta、gamma、alpha」，分别代表「X、Y、Z」的旋转方向。

beta 表示设备在 x 轴上的旋转角度，范围为 [-180, 180] 度。它描述的是设备由前向后旋转的情况。
gamma 表示设备在 y 轴上的旋转角度，范围为 [-90, 90] 度。它描述的是设备由左向右旋转的情况。
alpha 表示设备沿 z 轴上的旋转角度，范围为 [0, 360] 度。

大概是这个样子：

const handleOrientation = ({beta: x, gamma: y, alpha: z}) => {
  // 1. 得到 x、y、z
  // 2. 处理 x、y、z
  // 3. 使用 x、y、z
}

global.addEventListener("deviceorientation", handleOrientation)

处理 x、y、z

由于我们期望立方体可以在 x、y、z 三个反向的旋转范围是 [-360, 360] 度，
但是 beta、gamma、alpha 的范围并不是我们期望的范围，所以我们要处理一下数据。

{
  x: x * 2,
  y: y * 4,
  z: (z - 180) * 2
}

使用 x、y、z

我们现在得到的 x、y、z 已经在 [-360, 360] 度范围内了，
接下来要做的就是，使用 x、y、z 修改父元素 .cube 的 rotateX(xdeg) rotateY(ydeg) rotateZ(zdeg) 旋转值。

完整的代码大概是这样：

const cube = document.querySelector(".cube")
const setCubePosition = ({x = 0, y = 0, z = 0}) => {
  cube.style = `transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(${x}deg);-webkit-transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(${x}deg);`
}
const handleOrientation = ({beta: x, gamma: y, alpha: z}) => {
  setCubePosition({
    x: x * 2,
    y: y * 4,
    z: (z - 180) * 2
  })
}

global.addEventListener("deviceorientation", handleOrientation)

庆祝时刻

现在我们已经完成了，一个利用「移动设备陀螺仪」与「preserve-3d」实现的 3D 交互效果。
让我们为自己鼓掌
???

点我查看完整代码

感谢阅读

GPU云服务器云服务器移动设备检测移动设备 java小球的碰撞 java圆的碰撞

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92571.html

「移动设备陀螺仪」与「preserve-3d」碰撞的火花

摘要：它描述的是设备由前向后旋转的情况。表示设备沿轴上的旋转角度，范围为度。完整的代码大概是这样庆祝时刻现在我们已经完成了，一个利用移动设备陀螺仪与实现的交互效果。原文链接：航洋 blog 「移动设备陀螺仪」与「preserve-3d」碰撞的火花涉及知识「CSS：transform、JS：deviceorientation」废话不多，先上 DEMO「请使用移动设备查看」如何搭建一个简...

cppowboy 2019-08-29 14:15 评论0 收藏0
探究 CSS 混合模式滤镜导致 CSS 3D 失效问题

摘要：滤镜也会导致失效完了吗没有。上文中的是什么上文的准确而言是什么我也无法确定，推测应该是，帧缓存对象，存在于显存中。帧缓存是一些二维数组和所使用的存储区的集合颜色缓存深度缓存模板缓存和累计缓存。今天在写一个小的 CSS Demo，一个关于 3d 球的旋转动画，关于 CSS 3D，少不了会使用下面这几个属性： { transform-style: preserve-3d; ...

Betta 2019-08-30 15:54 评论0 收藏0
探究 CSS 混合模式滤镜导致 CSS 3D 失效问题

摘要：滤镜也会导致失效完了吗没有。上文中的是什么上文的准确而言是什么我也无法确定，推测应该是，帧缓存对象，存在于显存中。帧缓存是一些二维数组和所使用的存储区的集合颜色缓存深度缓存模板缓存和累计缓存。所以，短期内可能无望解决。今天在写一个小的 CSS Demo，一个关于 3d 球的旋转动画，关于 CSS 3D，少不了会使用下面这几个属性： { transform-style: preser...

番茄西红柿 2019-04-23 11:58 评论0 收藏0
css3旋转的盒子

摘要：因为不管你怎么活，明天太阳照样升起。我们能做的，就是尽全力不让自己被这种慢性毒药所蛊惑，努力，努力冲开束缚你的结界。工作中一直做普通的网页，今天浏览到一篇做3d旋转的盒子的效果，感觉挺好玩，于是跟着教程练了练，在此做个记录html 1 2 3 4 5 6 camer...

MorePainMoreGain 2019-08-29 11:24 评论0 收藏0