Question

我想轮播div class="cover" 180度问题帮助我。

以下是我的文件：

HTML code：

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

Answer 1

使用以下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

Answer 2

检查一下：

working pen

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

div旋转无法正常工作

2 个答案: