2017-04-26 1 views
0

저는 현재 국제적인 웹 사이트에서 일하고 있으며, 그 중 하나의 언어는 아랍어입니다. 아랍 문화로 인해 전체 인터페이스는 수직으로 미러링되어야합니다 (텍스트 방향뿐만 아니라면을 뒤집어 놓아야 함).내 HTML을 세로로 쉽게 미러링하는 방법은 무엇입니까?

이미 컨테이너에서 transform: rotateY(180deg), 각 자식 노드에서 transform: rotateY(180deg)으로 트릭을 사용하려고했지만 인터페이스가 완전히 사라 졌다는 문제가있었습니다. 동일한 결과가있는 transform: scale(-1, 1)을 시도했습니다. backface-visibility: visible이 문서의 각 노드에 추가되었습니다.

별도의 스타일 시트 및 기타 아픈 것들을 작성하지 않고 웹 사이트 인터페이스를 미러링하는 방법을 알고 있습니까?


OK, 난 그냥 여기 내 문제를 다시, 어쩌면이 도움이 될 수 있습니다 날이 들어 https://jsfiddle.net/z7ksof29/3/

+0

가능한 중복 텍스트?] (http://stackoverflow.com/questions/5406368/can-you-use-css-to-mirror-flip-text) –

+0

뒷면을 보셨습니까? – Nitesh

+0

@ArjanKnol 이미 시도했습니다, 동일한 결과 –

답변

0

이 작동 :

html { 
    -moz-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1); 
    filter: FlipH; 
    -ms-filter: "FlipH"; 
} 
당신이/플립을 반영하기 위해 CSS를 사용할 수 [의
+0

'filter : FlipH'가 전혀 작동하지 않습니다, transform : scale은 같은 결과를줍니다 :( –

+0

Unlucky. 내게 링크를 보낼 수 있습니까? – RacoonOnMoon

+0

html { -moz-transform : scale (-1, 1); -webkit-transform : scale (-1, 1); -o-transform : scale (모든 접두사를 사용 했습니까? -1, 1); -ms-transform : scale (-1, 1); 변형 : scale (-1, 1); } – RacoonOnMoon

관련 문제