如何使用CSS翻转div? [英] how to flip the div using css?
本文介绍了如何使用CSS翻转div?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将div悬停在div上. http://css3.bradshawenterprises.com/flip/ 但仍然无法将div悬停在div上.这是我的小提琴
I am trying to flip the div on hover ..I take help from this example http://css3.bradshawenterprises.com/flip/ But still I am not able to flip my div on hover ..here is my 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;
}
推荐答案
您可以尝试使用链接到的示例中的所有必要部分.我对其进行了一些更新，以使其更符合您的示例:
You could try using all the necessary pieces from the example you linked to. I updated it a bit to more closely match your example:
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;
}
这篇关于如何使用CSS翻转div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
