Question

我对所发生的事情感到困惑。我们这里的两个代码应该是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>

Answer 1

第一个例子中的类名是

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

和第二个（工作）是

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

所以基本上你的CSS选择器中有拼写错误。

这两个代码之间的区别是什么？一个是有效的，一个不是吗？

1 个答案: