我为发生的事情感到困惑。我们在这里拥有的两个代码应该是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>
最佳答案
第一个示例中的类名是
.fli3D > .front { ... };
.kfli3D > .back { ... };
在第二个（工作中）是
.flip3D > .front { ... };
.flip3D > .back { ... };
所以基本上，您的类CSS选择器中有错字。
关于html - 这两个代码有什么区别？一种有效，一种无效？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27279887/