CSS를 사용하여 플립 요소를 회전하는 방법

변형 속성을 사용하면 회전하거나 뒤집을 수 있지만 동시에 둘 다 할 수 있습니까? 요소를 90도 회전시키고 수평으로 뒤집기를 원한다고합시다. 두 속성 모두 동일한 속성으로 수행되므로 후자는 속성을 덮어 씁니다. 여기 편의를 위해 예를 들어 바이올린는 다음과 같습니다CSS를 사용하여 플립 요소를 회전하는 방법

http://jsfiddle.net/DtNh6/

transform: rotate(90deg); 
transform: scaleX(-1);

출처

2013-06-10 chinabuffet

내가 jsfiddle와 바이올린, 이것은 일 :

$('#photo').css('transform', 'rotate(90deg) scaleX(-1)');

귀하의 질문에 관련하려면 결과 CSS는 미래 세대를위한

transform: rotate(90deg) scaleX(-1);

출처

2013-06-10 00:43:19

브라우저에서 지원되는지 궁금한가요? 감사! – chinabuffet

공간 분리 속성 비트가 사양에 있습니다. "사양에서"얼마나 "브라우저에서 지원"으로 매핑되는지는 누구나 추측 할 수 있지만, 필자가 생각하는대로 사용할 수 있습니다. (지금까지는 번역을 전혀 구현하지 않는 브라우저) –

나는 그와 똑같은 것을 내가 어떻게 대답했는지, 그리고 그 사람을 대답으로 표시하는 것을 좋아한다. –

이 속성은과 같이 공백으로 구분 될 수있다.

transform: rotate(90deg) scaleX(-1);

출처

2013-06-10 00:41:53

감사합니다. 내가 복수를 받아 들일 수 없다 : P – chinabuffet

같은,보다 완벽한 해답을 찾습니다 :

.rotate2{ /*leaning left <- */ 
    -webkit-transform:rotate(270deg); 
    -moz-transform:rotate(270deg); 
    -o-transform:rotate(270deg); 
    -ms-transform:rotate(270deg); 
    transform:rotate(270deg); 
} 
.rotate4{ /*upside down*/ 
    -webkit-transform:rotate(180deg); 
    -moz-transform:rotate(180deg); 
    -o-transform:rotate(180deg); 
    -ms-transform:rotate(180deg); 
    transform:rotate(180deg); 
} 
.rotate6{ /*leaning right -> */ 
    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -o-transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    transform:rotate(90deg); 
} 
.rotate8{ /*vertical flip*/ /*upside-down mirror*/ 
    -moz-transform: scale(1, -1); 
    -webkit-transform: scale(1, -1); 
    -o-transform: scale(1, -1); 
    -ms-transform: scale(1, -1); 
    transform: scale(1, -1); 
} 
.rotate10{ /*vertical flip*/ /*upside-down*/ 
    -moz-transform: rotate(90deg) scale(1, -1); 
    -webkit-transform: rotate(90deg) scale(1, -1); 
    -o-transform: rotate(90deg) scale(1, -1); 
    -ms-transform: rotate(90deg) scale(1, -1); 
    transform: rotate(90deg) scale(1, -1); 
} 
.rotate12{ /*horizontal flip*/ /*left-right mirror*/ 
    -moz-transform: scale(-1, 1); 
    -webkit-transform: scale(-1, 1); 
    -o-transform: scale(-1, 1); 
    -ms-transform: scale(-1, 1); 
    transform: scale(-1, 1); 
} 
.rotate14{ /*horizontal flip*/ /*left-right mirror*/ 
    -moz-transform: rotate(90deg) scale(-1, 1); 
    -webkit-transform: rotate(90deg) scale(-1, 1); 
    -o-transform: rotate(90deg) scale(-1, 1); 
    -ms-transform: rotate(90deg) scale(-1, 1); 
    transform: rotate(90deg) scale(-1, 1); 
}

출처

2016-06-26 16:50:16

CSS를 사용하여 플립 요소를 회전하는 방법

답변

관련 문제