CSS 翻牌特效 關於不同瀏覽器

 最近在製作JS的翻牌記憶遊戲作品 搞了CSS翻牌特效搞一天

不論怎麼用   backface-visibility: hidden;

這段程式碼都沒辦法發揮功能，卡背都沒辦法消失

後來發現在Firefox要設定起始的牌面角度

transform: rotateY(0deg);


而在chrome edge 需要在parent element上面加上:

 transform-style: preserve-3d;

這樣才能發揮應該的效果喔~

真的會被自己氣死 超蠢

留言

張貼留言

這個網誌中的熱門文章

[js] 關於 js的 ...

... 在ES6的JS裡面叫做其餘參數 MDN的描述如下: 如果函式的最後一個命名參數以  ...  開頭，它會被視為一個陣列。該陣列的元素會被置於索引從  0 （含）到的  theArgs.length （不含）位置，並且被視為一個函式的參數。 則會把之後的參數全部蒐集起來，成為一個新的Array。 例如: let [ x, y, ...other] = [ 1, 2 ,3 ,4 ,5 ,6 ,7, 8, 9]; console.log( x, y, ...other);  會顯示 1 2  後面一個名為other的arry 包含剩下的3~9 參考資料: 其餘參數 - JavaScript | MDN (mozilla.org)
閱讀完整內容

[Js] 關於try 跟 catch

  MDN網站內稱為例外處理，使用方式如下: try { 要做的事情 } catch(e) { 例外處理 } 會把try裡面的程式碼執行一次，遇到問題會跳轉到catch裡面，如果catch也有問題就會直接跳錯誤通知。 上面說到如果程式碼遇到問題會終止執行，而這個問題大部分都是我們在瀏覽器上看到的編譯錯誤，最常看到的錯誤有: js 的語法錯誤(SyntaxError)，像是  Unexpected token. 。 變數名稱拼錯(ReferenceError)，像是  xxx is undefined. 。 找不到 function(TypeError)，像是  xxx is not a function 。 瀏覽器會將這些編譯成 Error 物件， 這個物件會被自動拋出(就算不加 throw 也會被拋出)，終止編譯，然後我們就會看到網頁一片空白，開發者工具出現錯誤提示。 所以就算在 try catch 中不用 throw 丟出 Error 物件， catch 也能捕捉到。 再來看看throw MDN內對throw的說明如下: throw  語句將引發使用者定義的異常。當前函數的執行將停止（之後的語句將不執行），並且控制權將傳遞給調用堆疊中的第一個  catch  塊。如果調用方函數之間不存在塊，則程式將終止。 throw可丟出使用者定義的異常，然後停止執行函數(這點跟return下面來比較看看吧) return 也可以停止函數執行並回傳值，差別在於return 只能在function中使用 throw可以在任何地方使用 return 可以直接使用(會回傳undefined) throw不行 Finally: 可接在try catch後面，也可以不接，如果try catch裡面有return語法，會中斷然後在finally程式碼的最後面執行。
閱讀完整內容