查看 demo 下載源碼

你可能對那些購買時需要選擇座位的訂票系統比較熟悉。通常在比賽，電影，搏擊或者演唱會售票的時候需要這樣做。如果能有一種座位的預覽效果該有多酷啊，比如能夠從你選擇的位置的角度去預覽舞臺或者屏幕。這個問題引出了今天我們將要分享給大家的一個新嘗試。

注意：我們使用到的某些技術還是非常實驗性質的，不是所有瀏覽器都支持。這個demo需要瀏覽器支持 transform-style: preserve-3d。

我們的想法是顯示一個可以從 座次表 選擇座位的影廳。當選擇一個座位，我們將移動到房間的相應位置，讓用戶可以看到所選位置的真實視野。在頁面的中央有一個可以解鎖旋轉 視角 的按鈕(默認是不能隨鼠標旋轉視角的)，考慮到真實情況下用戶會旋轉的自己的頭，所以這點也是很重要的。

這個demo中用到的預告片來自 The Blender Foundation 的動畫片 Sintel 。

開始，我們顯示一個帶預告片信息和選擇座位選項的預告屏幕：

然后我們點擊 select the seats，我們將把視野移到影廳的后面，并顯示座次表：

一旦點擊了一個座位，視野將移動到座位相應的位置：

屏幕中央的圖標可以讓我們解鎖視野，比如可以讓觀察者環顧四周。這類似于腦袋的自由扭動，對于模擬真實視野是很重要的。

我們可以在任意點播放預告片，并感受到從那個特定位置屏幕是如何呈現的。

不幸的是，某些版本的IE不支持 transform-style: preserve-3d ，所以這個demo是不能在這些版本運行的。

在Github上找到這個項目 。

原文： http://tympanus.net/codrops/2016/01/12/cinema-seat-preview-experiment/ 。

本條技術文章來源于互聯網，如果無意侵犯您的權益請點擊此處反饋版權投訴

本文系統來源：php中文網

總結

以上是生活随笔為你收集整理的选择座位html,影厅座位预览效果（css3）_html/css_WEB-ITnose的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。