悬停时的 CSS 平铺翻转

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';
} 

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