我试图在悬停时翻转 div ..我从这个例子中得到了帮助 http://css3.bradshawenterprises.com/flip/ 但我仍然无法在悬停时翻转我的 div ..这是我的 fiddle
https://jsfiddle.net/d13cead3/
.front{
width: 100%;
height: 100%;
background-color:red;
}
.front:hover {
transform: rotateY(180deg);
}
#container{
perspective: 1000;
width:200px;
height:200px;
}
#innercontainer{
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 5.0s linear;
}
.back{
width: 100%;
height: 100%;
background-color:blue;
}
最佳答案
您可以尝试使用您链接到的示例中的所有必要部分。我对其进行了一些更新以更接近您的示例:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="innercontainer">
<div class="front face">
FRONT
</div>
<div class="back face">
BACK
</div>
</div>
</div>
</body>
</html>
CSS
.container {
position: relative;
margin: 10px auto;
width: 200px;
height: 200px;
z-index: 1;
perspective: 1000;
}
.innercontainer {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.container:hover .innercontainer {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #00F;
}
.face.front{
background-color: #F00;
color: #FFF;
text-align: center;
padding: 10px;
}
关于jquery - 如何使用CSS翻转div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34833907/