div 배경과 텍스트가 다른 동작을합니다.

div의 배경 이미지 만 회전하고 싶습니다. 현재 div 텍스트 This is div도 회전되어 텍스트 순환을 방지하고 싶습니다.div 배경과 텍스트가 다른 동작을합니다.

코드 :

.flippy { 
    /**/-moz-transform:scale(1,1);-webkit-transform:scale(1,1); 
    transform:scale(1,1); 
    /**/-webkit-transition:all 600ms ease;-webkit-transition:all 600ms ease; 
    transition:all 600ms ease; } 
    .flippy[flipped] { 
     /**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1); 
     transform:scale(-1,1); } 
#flippy1 
{ 
    border: 1px solid white; 
    background-color:red; 
    height:200px; 
    width:200px; 
}

http://jsfiddle.net/simmi_simmi123/sesZv/3/

출처

2013-06-05 anam

처럼 jQuery를 편집 sesZv/12 /)). 그렇지 않으면 요소에서 배경을 제거하고 자체 요소에 배치하고 해당 요소 만 뒤집어 야합니다. – Zeta

동일한 질문을 두 번씩 반복합니다! http://stackoverflow.com/questions/5087420/ – xec

@Zeta 동일한 div에 이미지와 텍스트를 넣으려는 것 – anam

이 최선의 해결책은 아니지만 여기

<img class="flippy" src="http://lorempixel.com/200/200/"/> 
<div class="no-rotate"> My div rotated </div> 
<div class="flippy" id="flippy1"> 

</div> 


.no-rotate{ 
    position:absolute; 
    z-index: 1; 
}

출처

2013-06-05 09:03:40 Jaay

http://jsfiddle.net/sesZv/13/ – Jaay

아니요, 원하는 게 아닙니다 ... 텍스트와 이미지에 동일한 div를 사용하고 싶습니다. – anam

위와 같은 결과를 원하십니까 (단 1 div 만 가능) 또는 @ Zeta와 같은 "트릭"을 되돌리려면 되겠습니까? – Jaay

이 시도 Z- 인덱스와 해결 방법입니다,

텍스트를 줄 바꿈 p으로 따르고 다음과 함께 p을 스타일하십시오. 또한

p.notflip{ 
    /**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1); 
    transform:scale(-1,1); 
}

을 보내고 것은 다시 ([예] (http://jsfiddle.net/ 내부 요소를 플립, 래퍼 추가하기이

$('.flippy').click(function(){     
    if ($(this).attr('flipped')){ 
     $(this).removeAttr('flipped'); 
     $(this).children('p').removeClass('notflip');} 
    else { 
     $(this).attr('flipped','flipped'); 
     $(this).children('p').addClass('notflip');} 
});

jsFiddle File

출처

2013-06-05 09:22:51

아니오 'flippy1'div 안에 이미지가없는 – anam

같은 div에 텍스트와 이미지가 필요하다. 'flippy1'div 안에 lorempixel.com 이미지를 추가하고 싶습니까? –

$('img.flippy').click(function(){ 
    if ($(this).attr('flipped')) 
     $(this).removeAttr('flipped'); 
    else $(this).attr('flipped','flipped'); 
});

출처

2013-06-05 10:33:28

div 배경과 텍스트가 다른 동작을합니다.

답변

관련 문제