CSS 변환 원점 간 브라우저 불일치

두 개의 톱니가있는 기본로드 svg를 시도합니다. Firefox에서이 기능이 제대로 작동하는 것 같습니다. Chrome에서는 그렇지 않습니다. https://jsbin.com/suhavoyopo/1/edit?html,css,output CSS 변환 원점 간 브라우저 불일치

어떤 조언 : 여기

는 jsfiddle입니까? 다음은

사용되는 CSS입니다 :

.container { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.first { 
 
    transform-origin: 30% 30%; 
 
    animation: spin 4s infinite linear; 
 
} 
 

 
.second { 
 
    transform-origin: 70% 70%; 
 
    animation: spin 4s infinite reverse linear; 
 
} 
 

 
@keyframes spin { 
 
    100% {transform: rotate(360deg) } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> 
 
    <g class="first"> 
 
    <path fill="#8f7f59" d="M79.9 52.6c.1-.8.1-1.7.1-2.6s0-1.8-.1-2.6l-5.1-.4c-.3-2.4-.9-4.6-1.8-6.7l4.2-2.9c-.7-1.6-1.6-3.1-2.6-4.5L70 35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6l-3 4.1c-2.1-.9-4.4-1.5-6.7-1.8l-.4-5.1c-.9-.1-1.8-.1-2.7-.1s-1.8 0-2.6.1l-.4 5.1c-2.4.3-4.6.9-6.7 1.8l-2.9-4.1c-1.6.7-3.1 1.6-4.5 2.6l2.1 4.6c-1.9 1.4-3.5 3.1-5 4.9l-4.5-2.1c-1 1.4-1.9 2.9-2.6 4.5l4.1 2.9c-.9 2.1-1.5 4.4-1.8 6.8l-5 .4c-.2.7-.2 1.6-.2 2.5s0 1.8.1 2.6l5 .4c.3 2.4.9 4.7 1.8 6.8l-4.1 2.9c.7 1.6 1.6 3.1 2.6 4.5l4.5-2.1c1.4 1.9 3.1 3.5 5 4.9l-2.1 4.6c1.4 1 2.9 1.9 4.5 2.6l2.9-4.1c2.1.9 4.4 1.5 6.7 1.8l.4 5.1H50s1.8 0 2.6-.1l.4-5.1c2.3-.3 4.6-.9 6.7-1.8l2.9 4.2c1.6-.7 3.1-1.6 4.5-2.6L65 69.9c1.9-1.4 3.5-3 4.9-4.9l4.6 2.2c1-1.4 1.9-2.9 2.6-4.5L73 59.8c.9-2.1 1.5-4.4 1.8-6.7l5.1-.5zM50 65c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z" transform="translate(-20 -20)"> 
 
    </path> 
 
    </g> 
 
    <g class="second"> 
 
    <path fill="#9f9fab" d="M79.9 52.6c.1-.8.1-1.7.1-2.6s0-1.8-.1-2.6l-5.1-.4c-.3-2.4-.9-4.6-1.8-6.7l4.2-2.9c-.7-1.6-1.6-3.1-2.6-4.5L70 35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6l-3 4.1c-2.1-.9-4.4-1.5-6.7-1.8l-.4-5.1c-.9-.1-1.8-.1-2.7-.1s-1.8 0-2.6.1l-.4 5.1c-2.4.3-4.6.9-6.7 1.8l-2.9-4.1c-1.6.7-3.1 1.6-4.5 2.6l2.1 4.6c-1.9 1.4-3.5 3.1-5 4.9l-4.5-2.1c-1 1.4-1.9 2.9-2.6 4.5l4.1 2.9c-.9 2.1-1.5 4.4-1.8 6.8l-5 .4c-.2.7-.2 1.6-.2 2.5s0 1.8.1 2.6l5 .4c.3 2.4.9 4.7 1.8 6.8l-4.1 2.9c.7 1.6 1.6 3.1 2.6 4.5l4.5-2.1c1.4 1.9 3.1 3.5 5 4.9l-2.1 4.6c1.4 1 2.9 1.9 4.5 2.6l2.9-4.1c2.1.9 4.4 1.5 6.7 1.8l.4 5.1H50s1.8 0 2.6-.1l.4-5.1c2.3-.3 4.6-.9 6.7-1.8l2.9 4.2c1.6-.7 3.1-1.6 4.5-2.6L65 69.9c1.9-1.4 3.5-3 4.9-4.9l4.6 2.2c1-1.4 1.9-2.9 2.6-4.5L73 59.8c.9-2.1 1.5-4.4 1.8-6.7l5.1-.5zM50 65c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z" transform="rotate(15 -15.958 135.958)"> 
 
    </path> 
 
    </g> 
 
</svg> 
 
</div> 
 
</body> 
 
</html>

출처

2016-07-09 Bondifrench

여기이

.first { 
    transform-origin: 30% 30%; 
    -webkit-transform-origin: 50% 50%; 
    animation: spin 4s infinite linear; 
} 

.second { 
    transform-origin: 70% 70%; 
    -webkit-transform-origin: 50% 50%; 
    animation: spin 4s infinite reverse linear; 
}

전체 예를 https://jsfiddle.net/ynnbbzcy/

처럼 50%에 -webkit-transform-origin 설정

출처

2016-07-09 08:33:46 jakob

CSS 변환 원점 간 브라우저 불일치

답변

관련 문제