1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .con{ 12 width:300px; 13 height: 300px; 14 background: #ccc; 15 padding:50px; 16 position: relative; 17 } 18 .con div{ 19 width:50px; 20 height: 50px; 21 background: blue; 22 animation:rota 10s; 23 } 24 /* .con:hover div{ 25 transform: translate(-10px,-10px); 26 transform-origin:0 0; 27 transform:rotate(10000deg); 28 transition:all 6s; 29 } */ 30 p{ 31 width:49px; 32 height: 49px; 33 position: absolute; 34 left:50px; 35 top: 50px; 36 border:1px solid #000; 37 } 38 @keyframes rota { 39 50%{ 40 transform-origin:0 0; 41 transform:rotate(10000deg); 42 /*將轉換原點設置為0,0元素最后繞開始的左上角旋轉*/ 43 } 44 100%{ 45 transform:rotate(-1000deg); 47 } 48 } 49 </style> 50 </head> 51 <body> 52 <div class="con"> 53 <div></div> 54 <p>用於比較位置的元素</p> 55 </div> 56 </body> 57 </html>
之前簡單學習了一下Css3的transform屬性，今天用的時候發現不不對勁，本來理解為坐標軸的中心在元素的中心，又重新回去看了理解一下。發現之前對坐標系的理解不正確。於是寫了一段代碼測試自己想法。
無論是3d或是2d轉換，坐標原點都是在轉換元素的左上角，向右為X軸正方形，向下為Y軸正方形。然后有個transform-origin屬性，其默認值是(50%，50%，0)。
即在元素中心，rotate(),traslate(),scale()等函數轉換是根據transform-origin規定的點進行的。
將轉換原點設置為0,0元素最后繞開始的左上角旋轉；
-------------------------------------------------------------------------------------------
很多人看過這張圖吧，這張3d的坐標系容易混淆，背景並不是指元素，不能理解為坐標軸的原點在元素中心。
