卡片翻转前翻转与css中声明的方向相反，为什么？答案

【问题标题】：card flipping front flips in different direction opposite of whats declared in the css why?卡片翻转前翻转与css中声明的方向相反，为什么？
【发布时间】：2017-06-07 20:41:09
【问题描述】：

我有一个带有 .card 类的父 div，它必须有子 div，当他们的父级悬停以创建翻转卡时，它会以相反的方向旋转。如果将鼠标悬停在它上面并等到过渡完成它可以正常工作，但是如果将鼠标悬停在它上面然后在动画完成之前移动鼠标解决这个问题？此外，如果您多次打开和关闭鼠标，即使他们有相同的触发器，两个孩子也会在不同的时间开始转动 - 为什么？

https://jsfiddle.net/8pktgqpu/15/

  .card,.front,.back{
    width: 100px;
    height: 160px;
    margin: 1px;
  }
  .card{
    position: relative;
  }
  .front{
    background-color: red;
    transform: perspective(400px) rotatey(0deg); 
    backface-visibility: hidden;
    transition: transform 1s ease-in-out 0s;
  }
  .back{
    backface-visibility: hidden;
    transform: perspective(400px) rotatey(180deg); 
    background-color: blue;
    transition: transform 1s ease-in-out 0s;
    position: absolute;
    top: 0;
  }

  .card:hover .front{
    transform: rotatey(-180deg);
  }
  .card:hover .back{
    transform: rotatey(0deg);
  }

【问题讨论】：

标签： css css-transitions

【解决方案1】：

添加一个 div 并使用 perspective 和 transform-style: preserve-3d; 获取它下面是一个例子

        .flip {
            width: 300px;
            height: 500px;
            perspective: 1000px;
        }
        .flip_box {
            width: 300px;
            height: 500px;
            position: relative;
            transition: all 0.4s linear;
            -webkit-transition: all 0.4s linear;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d
        }
        .front, .back {
            position: absolute;
            width: 300px;
            height: 500px;
            top: 0px;
            left: 0px;
            border: 1px solid #666;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        .front {
            color: red;
            font-size: 16px;
        }
        .back {
            color: blue;
            font-size: 18px;
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }
        .flip:hover .flip_box {
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }

<div class="flip">
    <div class="flip_box">
        <div class="front">
            Hello
        </div>
        <div class="back">
            Bye
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

试试这个...

.card-container {
  perspective: 1000px;
}

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

.card-container, .front, .back {
  width: 100px;
  height: 160px;
  margin: 1px;
}

.card {
  transition: 1s ease-in-out 0s;
  transform-style: preserve-3d;
  position: relative;
}

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
  background-color: red;
}

.back {
  transform: rotateY(180deg);
  background-color: blue;
}

<div class="card-container">
	<div class="card">
		<div class="front">
			front
		</div>
		<div class="back">
			back
		</div>
	</div>
</div>

【讨论】：