我在使轉(zhuǎn)換原點(diǎn)在Firefox（v.18 +，未測(cè)試的其他版本）中工作時(shí)遇到問題。Webkit瀏覽器可以正常工作。我正在嘗試將原點(diǎn)設(shè)置為組的中心，但是到目前為止我沒有嘗試過。這是代碼：<!DOCTYPE html><html> <head> <title>TEST</title> <style> #test{ -webkit-transform-origin: 50% 50%; transform-origin: center center; -webkit-animation: prop 2s infinite; animation: prop 2s infinite; } @-webkit-keyframes prop { 0% { -webkit-transform: scale(1,1);} 20% { -webkit-transform: scale(1,.8);} 40% { -webkit-transform: scale(1,.6);} 50% { -webkit-transform: scale(1,.4);} 60% { -webkit-transform: scale(1,.2);} 70% { -webkit-transform: scale(1,.4);} 80% { -webkit-transform: scale(1,.6);} 90% { -webkit-transform: scale(1,.8);} 100% { -webkit-transform: scale(1,1);} } @keyframes prop { 0% { transform: matrix(1, 0, 0, 1, 0, 0);} 20% { transform: matrix(1, 0, 0, .8, 0, 0);} 40% { transform: matrix(1, 0, 0, .6, 0, 0);} 50% { transform: matrix(1, 0, 0, .4, 0, 0);} 60% { transform: matrix(1, 0, 0, .2, 0, 0);} 70% { transform: matrix(1, 0, 0, .4, 0, 0);} 80% { transform: matrix(1, 0, 0, .6, 0, 0);} 90% { transform: matrix(1, 0, 0, .8, 0, 0);} 100% { transform: matrix(1, 0, 0, 1, 0, 0);} } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16"> <g id="test"> <rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/> </g> </svg> </body></html>謝謝你的幫助！
3 回答
慕妹3242003
TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊
我試圖使用CSS過渡圍繞其中心點(diǎn)旋轉(zhuǎn)一個(gè)簡(jiǎn)單的齒輪svg圖形。我和Firefox有同樣的問題；轉(zhuǎn)換原點(diǎn)似乎沒有任何效果。
解決方案是繪制原始svg形狀，使其中心位于坐標(biāo)0、0處：
<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</svg>
然后在其周圍添加一個(gè)組并轉(zhuǎn)換為所需的位置：
<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<g transform="translate(150, 100)">
<rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</g>
</svg>
現(xiàn)在，您可以應(yīng)用應(yīng)在Firefox中使用的css轉(zhuǎn)換（我根據(jù)用戶操作（js-rotateObject）使用JavaScript將類添加到HTML標(biāo)記，并使用Minimizr檢查瀏覽器是否可以處理轉(zhuǎn)換和轉(zhuǎn)換（.csstransforms.csstransitions）：
#myObject{
transform: rotate(0deg);
transition: all 1s linear;
}
.csstransforms.csstransitions.js-rotateObject #myObject{
transform: rotate(360deg);
}
希望能有所幫助。
添加回答
舉報(bào)
0/150
提交
取消