DIV旋转正确

我想旋转div class="cover"180度whts问题帮助我。DIV旋转正确

这里是我的文件：

HTML代码：

<div class="wrapper"> 
    <div class="tweet"> 
    <button type="submit"><span class="icon-twitter"><img src="2.jpg"></img></span>Tweet</button> 
    <div class="count">10.5K</div> 
    </div> 
    <div class="cover"> 
    <span class="icon-twitter"><img src="2.jpg"></img></span> 
    </div> 
</div> 
<script src="jas.js"></script>

CSS代码：

.cover { 
    color: white; 
    text-shadow: 0 2px 2px rgba(0,0,0,0.3); 
    font-size: 3em; 
    width: 200px; 
    height:70px; 
    background:linear-gradient(#30CCFC, #2CC5EF); 
    text-align:center; 
    position:absolute; 
    top:0; 
    left:0; 
    box-shadow: inset 0 0 1px 1px #54AED0; 
    cursor:pointer; 
    transform-style: preserve-3d; 
    transition:all 0.3s ease-out; 
    transform-origin: center bottom; 
    /*visibility:hidden;*/ 
} 

.open { 
    -ms-transform: rotateX(-180deg); 
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.3),inset 0 0 1px 1px #54AED0; 
    background: linear-gradient(#33CEFE, #38D6FD); 
}

JavaScript代码：

$('.cover').on('click', function(){ 
    $(this).toggleClass('open'); 
});

来源

2016-07-22 Asad

试试这个“变换：旋转（-180deg）; “ –

你说：‘DIV转工作不正常’，它应该如何工作'-ms-transform'仅适用于IE，前缀内部消除工作正常 – blonfu

使用下面的CSS

.cover { 
    /* Firefox */ 
    -moz-transform: rotate(-180deg); 

    /* IE */ 
    -ms-transform: rotate(-180deg); 

    /* Opera */ 
    -o-transform: rotate(-180deg); 

    /* Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
     /*visibility:hidden;*/ 

}

Working Demo

欲了解更多信息Read

来源

2016-07-22 07:00:49

地方它不工作 – Asad

：？offcourse你.cover class ..，看我的演示 – Asad

@Asad使用CSS –

检查：

working pen

.open { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    transform: rotate(180deg); 
}

来源

2016-07-22 07:32:58

回答

相关问题