내 문제를 설명하기 위해 mockup을 만들었습니다. 첫 번째 예제 (box1)로 수행 한 작업에 솔루션이 들어갈까 봐 걱정됩니다.CSS 변형을 사용하고 자식 요소에 영향을 미치지 않는 방법이 있습니까
왜 부모 요소에 CSS 변환을 적용 할 수 없으며 하위 요소에 적용하지 않거나 적어도 재정의하지 않아야하는지 잘 모르겠습니다.
transform 속성을 사용하여 첫 번째 예제의 효과를 얻는 방법이 있는지 알려주십시오. 두 번째 이미지의 크기를 조정하는 것을 원하지 않습니다. 부모 div뿐입니다. 내가 GPU 가속을 사용하려면이 속성을 사용하기 위해 노력하고있어
참고.
저는 GPU 성능 퍼크를 얻기 위해 -transform을 사용하고 싶었습니다. 너비 애니메이션 인 http://jsfiddle.net/Vyaf3/22/을 계속 사용 하겠지만 GPU 가속화를 가능하게하는 css3 속성을 적용하는 것으로 추측합니다.
크롬 이외의 다른 브라우저에서는이 기능을 사용하지 않았습니다.
부모 요소의 오버플로 숨김 집합은 이미지의 상속 크기 조정을 의미합니다.
그래서 애니메이션이 적용된 상자에 오버플로 자동을 설정하면 크기 조정 상속이 수정됩니다.
http://jsfiddle.net/gnrlbzik/5Q8EC/은 자동으로 설정된 오버 플로우를 테스트하여 이미지 치수를 그대로 유지합니다.
스크롤바가 보이지 않기 때문에 실제로 다른 div를 추가했습니다. http://jsfiddle.net/5Q8EC/8/ 주셔서 감사합니다. 오버 플로우가 어떻게 상속에 영향을 주는지 흥미 롭습니다. – mikevoermans
문제 없습니다. 도와 드리겠습니다. 답변을 수락 해 주셔서 감사합니다. – GnrlBzik
그래, 나는 그 성가신 스크롤 막대를 두려워하면서 또 다른 래퍼를 생각하고 있었다.) – GnrlBzik
의미가 있기 때문에 나는 당신이 그것을 변형하고있는 자식 요소를 변형시키는 것을 막을 수 있어야한다고 생각하지 않는다. 변형은 상자 1의 예와 같이 너비를 애니메이션으로 표현하는 것이 아니라 x의 크기를 조절합니다.
저는이 질문이 GPU를 사용하여 애니메이션을 처리하는 기능을 사용하여 약간의 성능 향상을 얻는 것에 관한 것이라고 생각합니다. 이것은 GPU가 움직이는 이미지로 요소를 효과적으로 처리함으로써 가능합니다. 따라서 내부에 애니메이션이있는 동안 크기/모양을 동적으로 유지하는 요소를 가질 수 없습니다. 어쩌면 정적으로 유지하려는 요소 내에서 요소를 변형하여 애니메이션에 대응할 수있는 방법이있을 수 있습니다. 그러나 이것은 효율적이거나 효과적이지 않을 수 있습니다.
참고 : 웹킷이 이러한 변환을 렌더링하는 데 사용하는 실제 기술에 정통하지 않습니다. 렌더링의 미세한 세부 사항이 정확하지 않은 경우 미안합니다. 만약 누군가가 어떻게 변형 작품에 대한 더 나은 설명과 함께 코멘트를 업데이 트됩니다.
정확합니다 -이 기능을 사용하여 GPU 성능을 얻을 수 있습니다. 어쩌면 단지 그것을 사용하도록 속일 수 있습니다. – mikevoermans
네, 척도는 가정과 척도를 조절합니다. – GnrlBzik
자동으로 오버플로를 설정합니다 .box1, .box2 – GnrlBzik
이미지가 애니메이션 div 위에 고정 된 크기로 유지되기를 원하십니까? –
http://jsfiddle.net/gnrlbzik/5Q8EC/ 이것이 당신이 달성하고자하는 효과가 있다면 알려주시겠습니까? – GnrlBzik