HTML

經常會在一些網站看到評論區，評論人的頭像當滑鼠經過會360°旋轉 先來看一下效果 .tximg{ height:300px; border-radius:50%; border:2px solid green; /變化規則/ transition:all 2s; } .tximg:hover{ /* 變化動作 定義2d旋轉，參數填寫角度 */ transform:rotate(360deg); } CSS 部分 img{ height:300px; border-radius:50%; border:2px solid green; /*變化規則*/ transition:all 2s; } img:hover{ /* 變化動作 定義2d旋轉，參數填寫角度 */ transform:rotate(360deg); } HTML 部分 (很簡單，就一張圖片) <img src="http://www.52ecy.cn/log0.png"> 3D 旋轉效果 (前端顯示樣式好像還是衝突了-。-) .div{ width:300px; height:300px; border:1px solid red; /如果希望看到3D效果，需要在動的這個元素的父元素，增加一個perspective屬性/ perspective:300px;/3D 元素距視圖的距離，一般與圖片的高度一致效果最佳/ } .img{ width:300px; height:300px; border:1px solid red; /變化規則/ /設定旋轉元素的原始點位置/ transform-origin:bottom; transition:all 2s; } .img:hover{ /變化動作/ transform:rotateX(60deg); } ...

先上效果圖，先睹為快。(這絕對不是一張圖片。嗯這話怎麼怪怪的) 不要問我iPhone幾，因為我也不知道，沒用過，你懂得。 css樣式部分 #phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/設定div元素的圓角邊框/ } #camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/距離上邊距10px 左右居中/ } #receiver{ width:80px; height:8px; border:2px solid #505050; margin:10px auto; border-radius:10px; background-color:#1A1A1A; } #screen{ width:225px; height:385px; background-color:#0A0A0A; border:3px solid #1C1C1C; margin:10px auto; } #btn{ width:40px; height:40px; background:#1A1A1A; border-radius:50%; /當寬高相同時，則為圓/ margin:10px auto; } /:before 選擇器在被選元素的內容前面插入內容。/ #btn:before{ width:22px; height:22px; border:2px solid white; border-radius:30%; content:""; /即使插入的內容為空也需要寫，否則不顯示/ display:inline-block; margin-top:7px; margin-left:7px; } HTML部分 晚些我又加了點玩意上去 點擊Home鍵可以讓手機亮屏，5秒後又再次熄滅螢幕 ...