javascript - 悬停时 CSS tile 翻转

Question

我有一些 Div 框，如何让它们在悬停时翻转？我已经尝试了一些我发现的例子，但我无法让它工作？有人可以帮帮我吗？

.kachel_a_image_1 {
	height:150px;
	width:150px;
	margin:auto auto;
	margin-top:15px;
	background:red;
}

.kachel_wrapper {
    margin: auto auto;
    width: 90%;
    min-height: 450px;
    margin-top: 55px;
    text-align: center;
  	padding:10px;
	padding-top:30px;
	padding-bottom:20px;
}

.kachel_text {
	font-size:10px;
	color:white;
line-height:15px;
  text-align:center;
	}

.kachel {
  height: 180px;
  width: 180px;
  margin-top: 20px;
  margin-left: 58px;
  background: #6e7176;
  display: inline-block;
  margin-bottom:30px;
}
	

<div class="kachel"><div class="kachel_a_image_1"></div><div class="kachel_text">Social</div></div>

如果可能的话，我只想使用 Css 而不使用 JS。有人可以向我解释这是如何工作的或给我一个非常简单的例子 :S 吗？

Answer 1

使用转换:

.kachel:hover{
    transform: rotateX(150deg);
} 

更多信息:http://www.w3schools.com/css/css3_3dtransforms.asp

此外，如果您想为动画添加持续时间，请使用 transition-duration

.kachel{
    transition-duration: 5s;
}

要在悬停后更改内容，请使用伪元素 :after 和属性 content。
例如:

.kachel:hover:after{
    content: 'hovering';
} 

你可能需要稍微改变一下，我还没有测试过。