gpt4 book ai didi

javascript - 透视 CSS3 不工作

转载 作者:行者123 更新时间:2023-11-28 17:22:32 31 4
gpt4 key购买 nike

我正在尝试开发 X 轴方向的卡片翻转动画。截至目前,div 现在只需使用 rotateX() 方法进行旋转。我试过对上层 div 使用透视属性,而不是工作它扭曲了我的 div 结构。因为,这只是一个工作阶段,我只针对谷歌浏览器。请在 codepen 上查看.

这是我的 HTML 代码。

<div class="wrapper">
<div class="upper">
<div class="upper-current">
<div class="content">
1
</div>
</div>
<div class="upper-next">
<div class="content">
2
</div>
</div>
</div>

<div class="lower">
<div class="lower-current">
<div class="content">
1
</div>
</div>
<div class="lower-next">
<div class="content">
2
</div>
</div>
</div>
</div>

还有我的 CSS,div.行{ 宽度:150px; 高度:200px; margin : 0 auto ;

        div.wrapper{
background-color: #444;
width: 150px;
height: 200px;
border-radius: 5px;
position:relative;

}

div.wrapper div.upper, div.wrapper div.lower{
height: 100px;
width:100%;

}

div.upper-current{
transition :all 1s;
transform-origin: 50% 100%;
}

div.wrapper > div.upper > div, div.wrapper > div.lower > div{
height: 100px;
width:100%;
position:absolute;
top:0;
overflow:hidden;
text-align:center;
background-color:#444;
}

div.wrapper > div.upper > div{
border-bottom: 3px solid #333;
}

div.wrapper > div.lower > div{
height: 200px;
}

div.upper-current{
z-index: 4;
}

div.upper-next{
z-index: 3;
}

div.lower-current{
z-index: 2;
}

div.lower-next{
z-index: 1;
}

div.content{
position: relative;
top: -24px;
}

我正在努力实现这种效果。 Top edge is larger, it looks like coming out.

但是对于我的代码,我只是得到了。 Plain rotate effect.

最佳答案

更新:codepen应该也适用于 Firefox。由于堆栈上下文问题,我刚刚制作了.upper relative并给它一个 z-index 所以它会在 .lower 以上.

如果你把 perspective .wrapper 上的 CSS 属性它应该工作:codepen

Perspective创建一个新的堆叠上下文,所以如果你把它放在 .upper 上, 你所有的鞋面 <div> z-index由于自然的 HTML 堆叠,'s 不再与较低的上下文相同,较低的在顶部。

关于javascript - 透视 CSS3 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27770066/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com