CSS瓦片翻转悬停

Question

我有一些Div Box我怎么能让他们在悬停时翻转？我已经尝试了一些我发现的例子，但我不能让它工作？有人可以帮帮我吗？

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

用于在悬停后更改内容时使用伪元素：在之后和属性内容。
例如：

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

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

Answer 2

使用transition和backface-visibility。

最好的灵魂可能是使用简单的变换和backface-visibility。的 jsfiddle

＆＃13;

＆＃13;

.front, .back{
  width: 100px;
  height: 100px;
}
.front{
  background-color: blue;
}
.back{
  background-color: red;
      background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
  background-size: cover;
}
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 100px;
	height: 100px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

＆＃13;

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
		</div>
		<div class="back">
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用@-webkit-keyframe

另一种方法是使用animation和@-webkit-keyframes。但是，这将最初运行动画一次。 （jsfiddle）

＆＃13;

＆＃13;

.box, .wrapper {
  width: 100px;
  height: 100px;
  position: absolute;
}

.back {
  transform: rotateY(90deg);
  background-color: red;
  -webkit-animation: in 0.2s forwards;
  animation in 1s forwards;
  -webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
  animation-delay: 0.2s;
}

.front {
  transform: rotateY(90deg);
  background-color: blue;
  -webkit-animation: out 0.2s forwards;
  animation out 0.2s forwards;
  background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
  background-size: cover;
}

.wrapper:hover .box.back {
  -webkit-animation: out 0.2s forwards;
  animation: out 0.2s forwards;
}

.wrapper:hover .box.front {
  -webkit-animation: in 0.2s forwards;
  animation: in 0.2s forwards;
  -webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
  animation-delay: 0.2s;
}

@-webkit-keyframes in {
  from {
    -webkit-transform: rotateY(90deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
  }
}

@-webkit-keyframes out {
  0% {
    -webkit-transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(90deg);
  }
}

＆＃13;

<div class="wrapper">
  <div class="box back"></div>
  <div class="box front"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

为此，我会将backface-visibility与transform

结合使用

<div class="container">
    <div class="box front">image</div>
    <div class="box back">Social</div>
</div>

CSS：

.container {
  width: 180px;
  height: 180px;
  position: relative;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.box {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.front {
  background: red;
  z-index: 2;
}

.back {
  z-index: 1;
  background-color: green;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  color:white;
}

.container:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

<强> Here's a JS fiddle

编辑：上面的小提琴已被编辑为有一个外包装，启动翻转。这可以确保动画不会抖动。

.wrapper {
    width: 180px;
}
.wrapper:hover .container {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}