为幻灯片添加CSS3或Jquery过渡效果

Question

为幻灯片添加CSS3或Jquery过渡效果

jqueryhtmlcss

4

我有一个水平滑块，我想在转换之间添加一些效果

现在的情况是幻灯片从左到右移动，并使用CSS3弹出图像

当前幻灯片

当幻灯片更改时，我想添加一种图像向侧面折叠的转换效果

就像下面的图片一样

带有过渡的幻灯片

非常感谢您提前的帮助

编辑：显示一些代码

对于所使用的元素，我已经使用了以下CSS3

#plane {
z-index: 9;
    position: absolute;
    left: -1200px;
    width: 1200px;
    top: 30%;
    max-width: 70%;
    padding: 10px 20px;
    -webkit-animation: plane 0.5s forwards;
    -webkit-animation-delay: 0.5s;
    animation: plane 0.5s forwards;
    animation-delay: 0.5s;
}

@-webkit-keyframes plane {
    100% { left: 0; }
}

@keyframes plane {
    100% { left: 0; }
}

- Marrento

1

请展示你所尝试过的（例如一些代码）。 - royhowie

漂亮的图形，酷炫的问题。 - OneChillDude

1

如果您想使用，我创建了一个非常类似的东西（http://codepen.io/Zeaklous/pen/bxjeI）。您可以根据自己的需求进行更改。 - Zach Saucier

谢谢Zach，让我试试看。这看起来很酷。 - Marrento

1个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- bjb568 · Accepted Answer

使用3D变换和透视。 Fiddle

#plane {
    transform: rotateY(45deg);
}
#container {
    perspective: 2000px;
}