無法通過CSS旋轉div（「transform」：「（180deg）」）;

http://codepen.io/kaigenji/pen/peyjL 無法通過CSS旋轉div（「transform」：「（180deg）」）;

嘿大家，我試圖讓我的.flip div翻轉rotateY，但我有什麼不工作，我不知道我做錯了什麼。非常感謝一些幫助。謝謝。

JS：

$("#a1, #a2, #a3, #a4").hover(function(){ 
    $(".flip").css("background-color","yellow"); 
    $(".flip").css("transform":"(180deg)"); 
    },function(){ 
    $(".flip").css("background-color","#00FF00"); 
    $(".flip").css("transform":""); 
});

HTML：

<body> 
    <div id="tile_wrapper"> 

    <div id="a1" class="tile a one"> 
     <div class="frame"> 
     <div class="flip"></div> 
     </div> 
    </div> 

    <div id="a2" class="tile a two"> 
     <div class="frame"> 
     <div class="flip"></div> 
     </div> 
    </div> 

    <div id="a3" class="tile a three"> 
     <div class="frame"> 
     <div class="flip"></div> 
     </div> 
    </div> 

    <div id="a4" class="tile a four"> 
     <div class="frame"> 
     <div class="flip"></div> 
     </div> 
    </div> 
</div>

CSS：

html, body, .frame, .flip { 
    width: 50px; 
    height: 50px; 
    margin: 0; 
} 

#tile_wrapper { 
    width: 232px; 
    height: 50px; 
} 


.tile { 
    display: inline-block; 
    float: left; 
    height: 50px; 
    width: 50px; 
    padding: 4px; 
} 

.tile { 
    -webkit-perspective: 100px; 
    -moz-perspective: 100px; 
    -o-perspective: 100px; 
    perspective: 100px; 
} 

.flip { 
    transition: background-color 0.6s ease-out; 
    background-color: #00FF00; 
} 

.frame { 
    -webkit-transition: 0.6s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transition: 0.6s; 
    -moz-transform-style: preserve-3d; 
    -o-transition: 0.6s; 
    -o-transform-style: preserve-3d; 
    transition: 0.6s; 
    transform-style: preserve-3d; 
    position: relative; 
}

來源

2014-09-01 Kai Daniels

在'.css（「transform」：「（180deg）」）中替換'：''''''' – FuzzyTree 2014-09-01 03:55:05

感謝您的更正，但翻轉部分仍然無法正常工作 – 2014-09-01 04:36:12

使用此JS，你忘記告訴它旋轉Y：

$("#a1, #a2, #a3, #a4").hover(function(){ 
    $(".flip").css("background-color","yellow"); 
    $(".frame").css("transform","rotateY(180deg)"); 
    },function(){ 
    $(".flip").css("background-color","#00FF00"); 
    $(".frame").css("transform","rotateY(0)"); 
});

來源

2014-09-01 04:50:22

謝謝您好，先生！ – 2014-09-01 04:56:52

無法通過CSS旋轉div（「transform」：「（180deg）」）;

回答

相關問題