這兩個代碼有什麼區別？一個工作，一個不工作？

我對發生了什麼感到困惑。我們這裏的兩個代碼應該是CSS中的3D轉換。好，讓我們開始吧。這兩個代碼有什麼區別？一個工作，一個不工作？

下面是我按照教程嘗試的。它顯示文字，但沒有動畫。幾乎似乎CSS不工作：

<!DOCTYPE html> 
    <html> 
     <head> 
     <style type="text/css"> 
      .flip3D{ width:240px; height:200px; margin:10px; float:left;} 
       .fli3D > .front 
        { 
         position:absolute; 
         transform: perspective(600px) rotateY(0deg); 
         background: #FC0; width:240px; height:200px; border-radius: 10px; 
         backface-visibility: hidden; 
         transition: transform .5s linear 0s; 
        } 
       .kfli3D > .back 
        { 
         position:absolute; 
         transform: perspective(600px) rotateY(180deg); 
         background: #80BFFF; width:240px; height:200px; border-radius: 10px; 
         backface-visibility: hidden; 
         transition: transform .5s linear 0s; 
        } 
       .flip3D:hover > .front 
        { 
         transform: perspective(600px) rotateY(-180deg); 
        } 
       flip3D:hover > .back 
        { 
         transform: perspective(600px) rotateY(0deg); 
        } 
     </style> 
    </head> 
<body> 
    <div class="flip3D"> 
     <div class="back">Box 1 - Back</div> 
     <div class="front">Box 1 - Front</div> 
    </div> 

    <div class="flip3D"> 
     <div class="back">Box 2 - Back</div> 
     <div class="front">Box 2 - Front</div> 
    </div> 

    <div class="flip3D"> 
     <div class="back">Box 3 - Back</div> 
     <div class="front">Box 3 - Front</div> 
    </div> 
</body> 
</html>

好了，這裏的官方版本：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.flip3D{ width:240px; height:200px; margin:10px; float:left; } 
.flip3D > .front{ 
    position:absolute; 
    transform: perspective(600px) rotateY(0deg); 
    background:#FC0; width:240px; height:200px; border-radius: 7px; 
    backface-visibility: hidden; 
    transition: transform .5s linear 0s; 
} 
.flip3D > .back{ 
    position:absolute; 
    transform: perspective(600px) rotateY(180deg); 
    background: #80BFFF; width:240px; height:200px; border-radius: 7px; 
    backface-visibility: hidden; 
    transition: transform .5s linear 0s; 
} 
.flip3D:hover > .front{ 
    transform: perspective(600px) rotateY(-180deg); 
} 
.flip3D:hover > .back{ 
    transform: perspective(600px) rotateY(0deg); 
} 
</style> 
</head> 
<body> 
<div class="flip3D"> 
    <div class="back">Box 1 - Back</div> 
    <div class="front">Box 1 - Front</div> 
</div> 
<div class="flip3D"> 
    <div class="back">Box 2 - Back</div> 
    <div class="front">Box 2 - Front</div> 
</div> 
<div class="flip3D"> 
    <div class="back">Box 3 - Back</div> 
    <div class="front">Box 3 - Front</div> 
</div> 
</body> 
</html>

來源

2014-12-03 Ben Kleschinsky

在第一個例子中的類名

.fli3D > .front { ... }; 
.kfli3D > .back { ... };

，並在第二個（工作一個）是

.flip3D > .front { ... }; 
.flip3D > .back { ... };

因此b asically你在你的類CSS選擇器中有錯字。

來源

2014-12-03 19:29:51 drinchev

這兩個代碼有什麼區別？一個工作，一個不工作？

回答

相關問題