Question

在这个小提琴我希望只旋转div的背景图像，目前div文本This is 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/

Answer 1

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

Answer 2

这不是最佳解决方案，但这是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;
}

Answer 3

试试这个，

使用p包装文字，并使用以下

设置p的样式

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

也像你这样编辑jquery

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

div背景和文本不同的行为

3 个答案: