div background and text different behaviour

Question

In this fiddle I wish to rotate only background image of div , currently div text This is div is also rotated I wish to avoid text rotation.

Code:

   .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/

Add a wrapper, flip the interior elements back ([example](http://jsfiddle.net/sesZv/12/)). Otherwise you'll have to remove the background from the element, put it in its own element and flip only that element. — Zeta, Jun 05 '13 at 09:01
This is the second time you duplicate the same question! http://stackoverflow.com/questions/5087420/ — xec, Jun 05 '13 at 09:06
@simmisimmi: Text and image? There is no image in the div with the text. Do you mean text and background image, which is something else? — Zeta, Jun 05 '13 at 11:29

score 1 · Answer 1 · answered Jun 05 '13 at 10:33

1

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

answered Jun 05 '13 at 10:33

max li

2,417
4
30
44

score 0 · Answer 2 · answered Jun 05 '13 at 09:03

0

This is not the best solution, but here's a workaround with z-index

<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;
}

answered Jun 05 '13 at 09:03

Jaay

2,103
1
16
34

no this is not what i want ... i want to use same div for text and images – anam Jun 05 '13 at 09:05
Do you want a result like above (but in only 1 div) or do you want a "trick" like @Zeta suggest with a revert flip? – Jaay Jun 05 '13 at 09:11

score 0 · Answer 3 · answered Jun 05 '13 at 09:22

try this,

wrap the text with p and style the p with following

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

also edit you jquery like this

$('.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

there in no image inside the 'flippy1' div, you like to add the lorempixel.com image inside the 'flippy1' div? — Roy Sonasish, Jun 05 '13 at 10:05

div background and text different behaviour

3 Answers3