CSS를 사용하여 가로 방향으로 배경 이미지 뒤집기

내가 특정 클래스에 대해 가로로 배치 한 기존 이미지를 뒤집을 수있는 방법은 무엇입니까? 나는이 스레드를 How to flip background image using CSS?으로보고 있었지만 아무도 대답을 찾지 못했습니다. 내가 할 수있는 것에 대한 제안이 있습니까?CSS를 사용하여 가로 방향으로 배경 이미지 뒤집기

.cta-dash-green2 > span { 

    display: inline-block; 
    height: 17px; 
    vertical-align: middle; 
    width: 17px; 
    margin: 0 5px 0 0; 
    background: url("../images/icon-cta-dash-green.png"); 

    -webkit-transform:scaleX(-1); 
    -moz-transform:scaleX(-1); 
    -ms-transform:scaleX(-1); 
    -o-transform:scaleX(-1); 
    transform:scaleX(-1); 

}

출처

2014-07-25 user3877471

당신이 클래스를 사용하여 위치를 당신의 HTML을 게시 할 수 있습니까? –

코드가 저에게 효과가있는 것 같습니다. [jsbin] (http://jsbin.com/sukejura/1/)에서 확인하십시오. 이 스타일을 오버라이드하는 다른 스타일이 있습니까? –

변형이있는 배경 이미지를 뒤집을 수는 없지만 스타일은 요소가 아닙니다. 어느 쪽이든, 당신이 필요로하는 것처럼 bg 이미지에 영향을 줄 수는 없습니다. –

내가 요소를 플립 내 사업이 CSS 클래스를 사용 :

여기

.flip-it { 
    -moz-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    -ms-transform: scaleX(-1); 
    transform: scaleX(-1); 
    -ms-filter: "FlipH"; 
    filter: FlipH; 
}

출처

2014-07-25 16:14:56 Idrees

코드입니다 여기에 지금까지 작동되지 않았 음을 작성한 코드입니다. 그것은

<div id="f1_container"> 
    <div id="f1_card" class="shadow"> 
    <div class="front face"> 
     <img src="/images/Cirques.jpg"/> 
    </div> 
    <div class="back face center"> 
     <p>This is nice for exposing more information about an image.</p> 
     <p>Any content can go here.</p> 
    </div> 
    </div> 
    </div>

그리고 CSS를하고있다 :

#f1_container { 
position: relative; 
margin: 10px auto; 
width: 450px; 
height: 281px; 
z-index: 1; 
} 
#f1_container { 
perspective: 1000; 
} 
#f1_card { 
width: 100%; 
height: 100%; 
transform-style: preserve-3d; 
transition: all 1.0s linear; 
} 
#f1_container:hover #f1_card { 
transform: rotateY(180deg); 
box-shadow: -5px 5px 5px #aaa; 
} 
.face { 
position: absolute; 
width: 100%; 
height: 100%; 
backface-visibility: hidden; 
} 
.face.back { 
display: block; 
transform: rotateY(180deg); 
box-sizing: border-box; 
padding: 10px; 
color: white; 
text-align: center; 
background-color: #aaa; 
}

출처

2014-07-25 17:08:04

CSS를 사용하여 가로 방향으로 배경 이미지 뒤집기

답변

관련 문제