您現在的位置是:電腦技術吧?>? 組裝維修 ??>??正方體旋轉,正方體旋轉怎么做??>??正文詳情

正方體旋轉,正方體旋轉怎么做

佟佳憐南2019-11-05 14:31:17 人圍觀
簡介一個正方體以對角線為軸旋轉渲染:CSS代碼:代碼如下:@keyframes自旋{from{transform:rotatey(0);}到{transform:rotatey(-360DE旋轉正方體怎么折

效果圖:

css代碼:  代碼如下:  @keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(-360deg); }}@keyframes spin-vertical {from { transform: rotateX(0); }to { transform: rotateX(360deg); }}/*************** 水平立方體 ***************/.cube-wrap {perspective: 800px;perspective-origin: 50% 100px;float:left;margin:150px 0 0 200px;}.cube {position: relative;width: 200px;-moz-transform-style: preserve-3d;-moz-animation: spin 20s infinite linear;}.cube div{position: absolute;width: 200px;height: 200px;background: rgba(255,255,255,0.1);box-shadow: inset 0 0 30px rgba(125,125,125,0.8);text-align: center;line-height: 200px;font-weight:bold;text-shadow:-1px 1px 5px #f60;color:#fff;font-family: sans-serif;text-transform: uppercase;font-size:30px;}.depth div.back-pane {transform: translateZ(-100px) rotateY(180deg);}.depth div.right-pane {transform:rotateY(-270deg) translateX(100px);transform-origin: top right;}.depth div.left-pane {transform:rotateY(270deg) translateX(-100px);transform-origin: center left;}.depth div.top-pane {transform:rotateX(-90deg) translateY(-100px);transform-origin: top center;}.depth div.bottom-pane {transform:rotateX(90deg) translateY(100px);transform-origin: bottom center;}.depth div.front-pane {transform: translateZ(100px);}/*************** 垂直旋轉的立方體 ***************/.cube-wrap.vertical .cube {transform-origin: 0 100px;animation: spin-vertical 5s infinite linear;}.cube-wrap.vertical .depth div.top-pane {transform:rotateX(-270deg) translateY(-100px);}.cube-wrap.vertical .depth div.back-pane {transform: translateZ(-100px) rotateX(180deg);}.cube-wrap.vertical .depth div.bottom-pane {transform: rotateX(-90deg) translateY(100px);}/*************** 平面旋轉的立方體 ***************/.cube-wrap.flat {perspective: none;perspective-origin: 0 0;}html代碼:  代碼如下:  div class=cube-wrapdiv class=cube depthdiv class=front-panefront/divdiv class=back-paneback/divdiv class=top-panetop/divdiv class=bottom-panebottom/divdiv class=left-paneleft/divdiv class=right-paneright/div/div/divdiv class=cube-wrap verticaldiv class=cube depthdiv class=front-panefront/divdiv class=back-paneback/divdiv class=top-panetop/divdiv class=bottom-panebottom/divdiv class=left-paneleft/divdiv class=right-paneright/div/div/divdiv class=cube-wrap flatdiv class=cube depthdiv class=front-panefront/divdiv class=back-paneback/divdiv class=top-panetop/divdiv class=bottom-panebottom/divdiv class=left-paneleft/divdiv class=right-paneright/div/div/div

版權聲明:本文由 佟佳憐南 整理編輯。

原標題:繞棱旋轉正方體問題,正方體沿體對角線旋轉

轉載注明出處:http://www.dn9ww09s.icu/assemble/11201.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 蘋果電腦如何切換雙系統,蘋果電腦裝雙系統切換

    蘋果電腦如何切換雙系統,蘋果電腦裝雙系統切換 相關圖片蘋果系統切換到windows系統很多使用Mac和蘋果電腦的朋友都會選擇為自己的電腦安裝雙機系統,因為他們的工作需要不僅僅是使用蘋果的Mac OS系統,所以如何在蘋果雙機系統之間切換,實...

  • 圓角代碼,圓角框架代碼

    圓角代碼,圓角框架代碼 相關圖片html圓角邊框代碼!doctype html public-//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/圓角設置...

  • 電腦經常藍屏怎么辦,電腦藍屏怎么辦?

    電腦經常藍屏怎么辦,電腦藍屏怎么辦? 相關圖片宏基筆記本電腦藍屏如果我們生活在電視連續劇里的一天,那么電腦就是電視連續劇里的老二。雖然不多,但這是整個節目的一部分。但是當我們的2號男性屏幕顯示為藍色時,我們應該...

  • 0x00000050藍屏代碼,藍屏代碼0x0000007B

    0x00000050藍屏代碼,藍屏代碼0x0000007B 相關圖片藍屏代碼0x0000003b在計算機使用過程中,用戶不可避免地遇到的計算機故障是計算機開機時的藍屏現象。不,有些用戶報告,當計算機打開時,藍屏代碼0x00000050出現,導致無法使用計算藍...

  • htmlinput屬性,html input標簽屬性

    htmlinput屬性,html input標簽屬性 相關圖片html input value今天收到HTML5 CSS3真是太棒了讓我介紹一下我今天使用的輸入屬性HTML5代碼如下:復制代碼如下:input type=text placeholder=html form表單屬性...

  • cf筆記本怎么調全屏,筆記本wen10cf怎么調全屏

    cf筆記本怎么調全屏,筆記本wen10cf怎么調全屏 相關圖片筆記本cf分辨率調多少對于很多粉絲來說,用筆記本電腦來播放現場直播是很困難的不,有些用戶在用筆記本電腦播放cf時總是遇到問題。例如,當我玩CF游戲時,我遇到了一個無法獲得...

  • 國際象棋是怎么玩的,國際象棋怎么玩教程

    國際象棋是怎么玩的,國際象棋怎么玩教程 相關圖片中國國際象棋怎么玩國際象棋的動作多種多樣,趣味盎然對兒童智力發展有特別好的作用。因此,國際象棋已被世界上許多國家列入小學課程。那怎么下棋呢?很多人不知道。現在,小...

  • cad圖像填充,如何填充

    cad圖像填充,如何填充 相關圖片ps填充圖片本文詳細闡述了HTML5畫布漸進填充的參數設置和使用,畫布透明度的設置和使用,并結合漸進填充和透明度支持實現了圖像的掩模效果一:漸變填充畫布支持兩種漸進填充方法...

  • 電腦開機自檢,電腦開機不自檢

    電腦開機自檢,電腦開機不自檢 相關圖片電腦每次開機都自檢小編在打開臺式機的時候,經常能看到電腦的自檢畫面,看著電腦屏幕上的字符串,特別讓人眼花繚亂。但在我關掉開機自檢后,我打開電腦的速度快了很多。所以...

  • 人臉識別代碼,人臉識別

    人臉識別代碼,人臉識別 相關圖片人臉識別原理這是一個演示了html5 javascript技術實現的人臉識別的網站。目前,它只適用于chrome瀏覽器。首先,您需要在地址欄中輸入about:flags,然人臉識別技術原理...

熱評文章

  • 電腦開機藍屏怎么解決,電腦經常藍屏怎么辦

    電腦開機藍屏怎么解決,電腦經常藍屏怎么辦 相關圖片筆記本電腦藍屏怎么解決伙計們,我得跟你們吐點苦水前段時間,小編制作的電腦似乎在自由自在,試圖給我一個藍屏。每次都讓我花時間去解決它。你和我有同樣的問題嗎如果有,我...

  • html音樂播放器代碼,iframe音樂播放器代碼

    html音樂播放器代碼,iframe音樂播放器代碼 相關圖片音樂網頁html代碼HTML5的作品,經過測試,效果不錯。不幸的是,他們只支持像谷歌和蘋果這樣的webkit核心瀏覽器。當用戶體驗時,請使用谷歌等瀏覽器運行,否則看不到效果。讓我們h...

  • dwg格式文件用什么軟件打開,如何打開dwg格式文件

    dwg格式文件用什么軟件打開,如何打開dwg格式文件 相關圖片微信怎么打開dwg格式文件不僅各行各業的工程師經常接觸CAD圖紙,而且同一部門的工作人員也經常接觸。然而,他們中的許多人并不需要使用CAD生產軟件來工作如何在沒有CAD生產軟件的...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽aside標簽的定義和規范aside用于加載非主體類的內容(DOM接口,可設置屬性)例如,廣告、群組鏈接、側邊欄等。!DOCTYPE htmlhtmlheadm自定標簽...

  • 電腦啟動不起來是什么原因,電腦花屏是什么原因

    電腦啟動不起來是什么原因,電腦花屏是什么原因 相關圖片租借電腦不管是手機還是電腦,剛買的時候都跑得很快。過了很長一段時間,它開始卡住,反應很慢。電腦太落后了,原因是什么?是什么導致電腦中毒恐怕很多用戶對此知之甚少。在...

  • 筆記本電腦怎么無線上網,筆記本電腦無線網絡

    筆記本電腦怎么無線上網,筆記本電腦無線網絡 相關圖片筆記本電腦連不了wifi目前筆記本電腦無線上網的方式很多,如使用路由器上網、購買聯通cdma等。所以,今天的編輯將教你如何使用筆記本電腦進行無線上網讓我們仔細看看。現在我們用...

  • css如何讓div居中,居中css

    css如何讓div居中,居中css 相關圖片html中div怎么居中div中行級元素的中心代碼如下:div class=treetitleimgsrc=images/app.png/span導航菜單/span/div要求:cen怎么讓div居中...

  • 2013office激活工具,office2016激活工具

    2013office激活工具,office2016激活工具 相關圖片激活office工具現在,小編一說“激活”,估計年輕人馬上就會想到電腦系統激活、微軟辦公激活等,如果你是這么想的,你真的很棒。因為小編今天說的是如何使用office 2013激活工offic...

  • 性能集成與性能開發,整車性能開發

    性能集成與性能開發,整車性能開發 相關圖片html5就業前景以下文章由一位名叫張利明的it技術人員撰寫,并發表在infoq的網站上。這一次,他在全文中從九個不同的方面分析了HTML5的性能,從性能的角度來看,HTML5首html5游戲開發前...

  • 電腦為什么這么慢,電腦又卡又慢

    電腦為什么這么慢,電腦又卡又慢 相關圖片電腦為什么很卡很慢新安裝的系統的計算機運行速度非常快,因為系統剛安裝完,就沒有安裝軟件,只是系統的純版本,這自然很快。當我們的電腦使用了很長一段時間,安裝了很多軟...

關注微信

变脸官网查询