成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

「移動設(shè)備陀螺儀」與「preserve-3d」碰撞的火花

jsyzchen / 840人閱讀

摘要：它描述的是設(shè)備由前向后旋轉(zhuǎn)的情況。表示設(shè)備沿軸上的旋轉(zhuǎn)角度，范圍為度。完整的代碼大概是這樣慶祝時刻現(xiàn)在我們已經(jīng)完成了，一個利用移動設(shè)備陀螺儀與實現(xiàn)的交互效果。

原文鏈接：航洋 blog

「移動設(shè)備陀螺儀」與「preserve-3d」碰撞的火花 
涉及知識「CSS：transform、JS：deviceorientation」

廢話不多，先上 DEMO「請使用移動設(shè)備查看」

如何搭建一個簡單的立方體

只需要寥寥幾行 HTML、CSS 代碼就能產(chǎn)出一個「立方體」

核心 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 過于簡單，就不贅述與解釋。
主要是要設(shè)置父元素 .cube 的 transform-style: preserve-3d，
使子元素位于 3D 空間中，不然子元素都是「平面內(nèi)、扁平化」，達不到 3D 效果。

給所有子元素 .cube-face 設(shè)置了透明的漸變色 rgba(156, 144, 144, .6) 背景，
是為了更好的觀察到「被遮住的反面」，視覺上更加 立體

目前效果截圖大概是這個樣子：

看起來就像一個正方形，其實是 6 個面全部重疊在一起。

CSS 第二步

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

上面 4 行代碼使得「正面 .cube-front」向前移動 80px「也就是立方體一半的邊長」。
同理我們可以設(shè)置「背面 .cube-back」向后移動 80px
效果大概是這樣：

CSS 第三步

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

上面 4 行代碼使得「左面 .cube-left」先順時針旋轉(zhuǎn)「90 度」
大概是這個樣子：

然后再向「左邊」移動 80px 就 OK 啦，
注意：左邊是 Z 軸負(fù)方向。

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

大概是這個樣子：

同理，我們可以做出右邊的效果，唯一區(qū)別就是，右邊移動方向與左邊相反。
道理類似，異曲同工，上邊和下邊，想必聰明的大家都掌握了正確寫法姿勢。

成品大概是這個樣子：

用陀螺儀使立方體動起來

細(xì)心的開發(fā)者應(yīng)該發(fā)現(xiàn)了，在最開始，我給父元素 .cube 設(shè)置了：
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg)
認(rèn)讓父元素在三維空間上旋轉(zhuǎn) 10 度。
如果我們動態(tài)連續(xù)修改這三個值，絕對可以達到 3D 旋轉(zhuǎn)動畫的效果。

這個時候，JS 的 deviceorientation「檢測設(shè)備方向」 事件閃現(xiàn)突然閃現(xiàn)在我的腦海。
因為這個事件的回調(diào)參數(shù)里面恰好有三個參數(shù)「beta、gamma、alpha」，分別代表「X、Y、Z」的旋轉(zhuǎn)方向。

beta 表示設(shè)備在 x 軸上的旋轉(zhuǎn)角度，范圍為 [-180, 180] 度。它描述的是設(shè)備由前向后旋轉(zhuǎn)的情況。
gamma 表示設(shè)備在 y 軸上的旋轉(zhuǎn)角度，范圍為 [-90, 90] 度。它描述的是設(shè)備由左向右旋轉(zhuǎn)的情況。
alpha 表示設(shè)備沿 z 軸上的旋轉(zhuǎn)角度，范圍為 [0, 360] 度。

大概是這個樣子：

注冊 deviceorientation 事件，得到 x、y、z

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 三個反向的旋轉(zhuǎn)范圍是 [-360, 360] 度，
但是 beta、gamma、alpha 的范圍并不是我們期望的范圍，所以我們要處理一下數(shù)據(jù)。

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

使用 x、y、z

我們現(xiàn)在得到的 x、y、z 已經(jīng)在 [-360, 360] 度范圍內(nèi)了，
接下來要做的就是，使用 x、y、z 修改父元素 .cube 的 rotateX(xdeg) rotateY(ydeg) rotateZ(zdeg) 旋轉(zhuǎn)值。

完整的代碼大概是這樣：

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)
慶祝時刻

現(xiàn)在我們已經(jīng)完成了，一個利用「移動設(shè)備陀螺儀」與「preserve-3d」實現(xiàn)的 3D 交互效果。
讓我們?yōu)樽约汗恼?
???

點我查看完整代碼

感謝閱讀

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92571.html

相關(guān)文章

  • 「移動設(shè)備陀螺儀」與「preserve-3d」碰撞的火花

    摘要：它描述的是設(shè)備由前向后旋轉(zhuǎn)的情況。表示設(shè)備沿軸上的旋轉(zhuǎn)角度，范圍為度。完整的代碼大概是這樣慶祝時刻現(xiàn)在我們已經(jīng)完成了，一個利用移動設(shè)備陀螺儀與實現(xiàn)的交互效果。 原文鏈接：航洋 blog 「移動設(shè)備陀螺儀」與「preserve-3d」碰撞的火花 涉及知識「CSS：transform、JS：deviceorientation」 廢話不多，先上 DEMO「請使用移動設(shè)備查看」 如何搭建一個簡...

    cppowboy 評論0 收藏0

  • 探究 CSS 混合模式濾鏡導(dǎo)致 CSS 3D 失效問題

    摘要：濾鏡也會導(dǎo)致失效完了嗎沒有。上文中的是什么上文的準(zhǔn)確而言是什么我也無法確定，推測應(yīng)該是，幀緩存對象，存在于顯存中。幀緩存是一些二維數(shù)組和所使用的存儲區(qū)的集合顏色緩存深度緩存模板緩存和累計緩存。 今天在寫一個小的 CSS Demo，一個關(guān)于 3d 球的旋轉(zhuǎn)動畫，關(guān)于 CSS 3D，少不了會使用下面這幾個屬性： { transform-style: preserve-3d; ...

    Betta 評論0 收藏0

  • 探究 CSS 混合模式濾鏡導(dǎo)致 CSS 3D 失效問題

    摘要：濾鏡也會導(dǎo)致失效完了嗎沒有。上文中的是什么上文的準(zhǔn)確而言是什么我也無法確定，推測應(yīng)該是，幀緩存對象，存在于顯存中。幀緩存是一些二維數(shù)組和所使用的存儲區(qū)的集合顏色緩存深度緩存模板緩存和累計緩存。所以，短期內(nèi)可能無望解決。今天在寫一個小的 CSS Demo，一個關(guān)于 3d 球的旋轉(zhuǎn)動畫，關(guān)于 CSS 3D，少不了會使用下面這幾個屬性： { transform-style: preser...

    番茄西紅柿 評論0 收藏0

  • css3旋轉(zhuǎn)的盒子

    摘要：因為不管你怎么活，明天太陽照樣升起。我們能做的，就是盡全力不讓自己被這種慢性毒藥所蠱惑，努力，努力沖開束縛你的結(jié)界。 工作中一直做普通的網(wǎng)頁，今天瀏覽到一篇做3d旋轉(zhuǎn)的盒子的效果，感覺挺好玩，于是跟著教程練了練，在此做個記錄html 1 2 3 4 5 6 camer...

    MorePainMoreGain 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<