Fatal编程技术网

Javascript 带css3的3D滑块

javascript jquery html css

Javascript 带css3的3D滑块,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想创建三维滑块使用CSS 3-D转换。我不太擅长网页设计 以下是我迄今为止所做的工作 Html代码 <html> <body> <section id="f4"> <h3>SCREENY</h3> <h1>Zobacz co potrafi nowy iOS 8</h1> <small>Oto kilka screenów dla zobrazowania je

我想创建三维滑块使用CSS 3-D转换。我不太擅长网页设计

以下是我迄今为止所做的工作

  • Html代码

    <html>

<body>
    <section id="f4">

    <h3>SCREENY</h3>
    <h1>Zobacz co potrafi nowy iOS 8</h1>

    <small>Oto kilka screenów dla zobrazowania jego możliwości </small>


    <center>
    <ul class="My3D_slider">

                <li><img src="http://enagrody.com/iphone6v3/images/ss6.jpg"  width="320" height="568"></li>

                <li><img src="http://enagrody.com/iphone6v3/images/ss2.jpg"  width="320" height="568"></li>

                <li><img src="http://enagrody.com/iphone6v3/images/ss3.png"  width="320" height="568"></li>

                <li><img src="http://enagrody.com/iphone6v3/images/ss4.png"  width="320" height="568"></li>

                <li><img src="http://enagrody.com/iphone6v3/images/ss5.jpg"  width="320" height="568"></li>

              </ul> 

    </center>

    </section>

</body>
    3.最终结果应该是这样的
    如果不使用jquery，如何实现这一点？如果不使用jquery是不可能的，请提供一些如何使用jquery实现这一点的教程。

    您可以始终使用诸如Flipster.js之类的jquery插件。谢谢，不使用插件是不可能做到这一点的。我尽量少用jquery，动画是用CSS关键帧完成的，下面是一个例子：谢谢，我使用3D转换来管理它。这里是创建3D旋转木马的最佳插件：您可以始终使用诸如Flipster.js之类的jQuery插件。谢谢，没有插件，没有简单的方法可以做到这一点。我试着尽可能少地使用jQuery，动画是用CSS关键帧完成的，下面是一个示例：谢谢，我使用3D转换来管理它。下面是创建3D旋转木马的最佳插件： 
    .My3D_slider{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;

}

.My3D_slider li img {
    margin: 0;
    display: block;
    position: absolute;
    width: 186px;
    height: 116px;
    left: 10px;
    top: 10px;
    border:2px solid black;
}

.My3D_slider li:nth-child (img) {transform: translateZ(-382.256px) rotateY(0deg) translateZ(382.256px);}

.My3D_slider li:nth-child (img) {transform: translateZ(-382.256px) rotateY(-72deg) translateZ(382.256px);}

.My3D_slider li:nth-child (img) {transform: translateZ(-382.256px) rotateY(-144deg) translateZ(382.256px);}

.My3D_slider li:nth-child (img) {transform: translateZ(-382.256px) rotateY(-288deg) translateZ(382.256px);}

.My3D_slider li:nth-child (img) {transform: translateZ(-382.256px) rotateY(-576deg) translateZ(382.256px);}