Question

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

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

netServiceDidResolveAddress get called with <NSNetService 0x61800003d6a0> local. _printer._tcp. Brother HL-3152CDW series.

Answer 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>

Answer 2

试试这个......

＆＃13;

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

＆＃13;

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

＆＃13;

卡片翻转前翻转的方向与css中宣称为什么相反？

2 个答案: