我想创建当有人将鼠标悬停在其上时向左和向右打开的小册子。
我使用 transform-origin: 0%
和 transform: rotateY(-180deg)
将小册子的左侧站点打开到左侧站点(卡片红色和蓝色)。对于右侧,我当然使用 transform-origin: 100%
和 transform: rotateY(180deg)
打开正确的站点(卡片绿色)。
但右侧的实际行为是,它应用 transform-origin: 0%
并在小册子的左侧站点后面旋转(这就是为什么您看不到它,但它那里)。
我不明白为什么 transform-origin: 100%
不生效。
这是代码:https://jsfiddle.net/eL6q3hp4/2/
.book-container {
height: 350px;
width: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.book-part {
height: auto;
width: auto;
position: absolute;
transform-style: preserve-3d;
top: 0;
left: 0;
}
.book-part > .card {
height: 350px;
width: 250px;
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* RIGHT SITE */
.right-part {
transform-origin: 0%;
}
.right-card {
transform: rotateY(-180deg);
}
.book-container:hover .right-part {
transform: rotateY(180deg);
transition: 0.7s;
transition-delay: 0.3s;
}
/* LEFT SITE */
.left-part {
transform-origin: 100%;
}
.left-card {
transform: rotateY(180deg);
}
.book-container:hover .left-part {
transform: rotateY(-180deg);
transition: 0.7s;
}
.middle-card {
background-color: blue;
}
.right-card {
background-color: green;
}
.left-card {
background-color: red;
}
.front-card {
background-color: yellow;
}
<div class="book-container">
<div class="book-part middle-part">
<div class="card middle-card"></div>
</div>
<div class="book-part right-part">
<div class="card right-card"></div>
</div>
<div class="book-part left-part">
<div class="card left-card"></div>
<div class="card front-card"></div>
</div>
</div>
最佳答案
从 .book-part
中删除绝对位置并反转旋转值。也可以在右边的方 block 上加一张前卡
我还添加了结束效果的过渡:
.book-container {
height: 350px;
width: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
}
.book-part {
transform-style: preserve-3d;
}
.book-part>.card {
height: 350px;
width: 250px;
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* RIGHT SITE */
.right-part {
transform-origin: 0%;
transition: 0.7s;
}
.right-card {
transform: rotateY(180deg);
}
.book-container:hover .right-part {
transform: rotateY(-180deg);
transition-delay: 0.3s;
}
/* LEFT SITE */
.left-part {
transform-origin: 100%;
transition: 0.7s;
transition-delay: 0.3s;
}
.left-card {
transform: rotateY(-180deg);
}
.book-container:hover .left-part {
transform: rotateY(180deg);
transition-delay: 0s;
}
<div class="book-container">
<div class="book-part middle-part">
<div class="card middle-card" style="background:blue"></div>
</div>
<div class="book-part right-part">
<img class="card right-card" style="background:green">
<img class="card front-card" style="background:pink;">
</div>
<div class="book-part left-part">
<img class="card left-card" style="background:red">
<img class="card front-card" style="background:yellow">
</div>
</div>
您还可以像下面这样简化您的代码:
.book-container {
height: 350px;
width: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
background:blue;
}
.book-container > div{
transform-style: preserve-3d;
}
.book-container > div:before,
.book-container > div:after{
content:"";
height: 350px;
width:100%;
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
background:yellow;
}
/* RIGHT SITE */
.right-part {
transform-origin: 0%;
transition: 0.7s;
}
.book-container .right-part:before {
transform: rotateY(180deg);
background:green;
}
.book-container:hover .right-part {
transform: rotateY(-180deg);
transition-delay: 0.3s;
}
/* LEFT SITE */
.left-part {
transform-origin: 100%;
transition: 0.7s;
transition-delay: 0.3s;
}
.book-container .left-part:before {
transform: rotateY(180deg);
background:red;
}
.book-container:hover .left-part {
transform: rotateY(180deg);
transition-delay: 0s;
}
<div class="book-container">
<div class="right-part">
</div>
<div class="left-part">
</div>
</div>
关于css - 变换原点 :100% not working for transform rotate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59145268/