Question

当用户点击div元素（卡片）时，我正在尝试旋转div元素。

为此，我使用JavaScript添加旋转div的类（使用jQuery）。

问题是，当用户点击DIV（或卡片）时，该div不会旋转

这是我正在使用的代码：

HTML：

<div id="boxcard" align="center">
            <div id="card1"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png" class=""></div>
            <div id="card2"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png" class=""></div>
            <div id="card3"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>

CSS：

#boxcard {
    z-index: 1;
    display: table;
        margin: 0px auto;
    width: auto;
}

#boxcard div{
    float: left;
    width: 100;
    height: 120;
    margin: 5px;
    padding: 5px;
    border: 4px solid #EE872A;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
  background: #B1B1B1;
    z-index: 2;
}
#boxcard > div:nth-child(6n+1) {
    clear: both;
}
#boxcard div img {
    /*display: none;*/
    border-radius: 10px;
    z-index: 3;
}

#boxcard div img.flip{

  transform: rotateY(180deg);
   display:inline-block;

}

JavaScript的：

var ImgOpened;
var BoxOpened;
var CurrentOpened;
$(document.getElementById("card1")).click(OpenCard);
$(document.getElementById("card2")).click(OpenCard);
$(document.getElementById("card3")).click(OpenCard);
function OpenCard() {
        var id = $(this).attr("id");
        var img = document.querySelector("#" + id + " img");
        img.classList.toggle("flip");

        if (ImgOpened == "") {
            BoxOpened = id;
            ImgOpened = $("#" + id + " img").attr("src");
        }
        else {
            CurrentOpened = $("#" + id + " img").attr("src");
            if (ImgOpened != CurrentOpened) {
                setTimeout(function() {
                    document.querySelector("#" + id + " img").classList.toggle("flip");
                    document.querySelector("#" + BoxOpened + " img").classList.toggle("flip");
                    BoxOpened = "";
                    ImgOpened = "";
                }, 400);
            } 
        }
    }

Answer 1

fiddle

#boxcard div img.flip{
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg);
display:inline-block;
}

Internet Explorer 10和Firefox支持转换属性。

Internet Explorer 9支持替代的-ms-transform属性（仅限2D转换）。

Opera，Chrome和Safari支持另一种选择-webkit-transform属性

Answer 2

我稍微修改了你的代码

#boxcard div img.flip{

  transform: rotate(180deg);
   display:inline-block;

}

DEMO

Answer 3

<强> DEMO

您需要添加如下所示的前缀，所有浏览器都不支持css3的所有功能，为了获得大多数浏览器支持，您需要添加前缀。

MORE INFO ON BROWSER PREFIX

#boxcard div img {
    /*display: none;*/
    border-radius: 10px;
    z-index: 3;
    -o-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -webkit-transition-duration:.5s;
    transition-duration:.5s;
}

#boxcard div img.flip{
-o-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
   display:inline-block;

}

CSS3转换无法正常工作

3 个答案: