登录
当前位置： 首页 > 面试题库 >

3d轮播效果

宰父玄天
2023-03-14
问题内容：

如何在CSS3中产生3D轮播效果？


问题答案：

在Stack Overflow，我们喜欢轮播！

我们有很多轮播可供选择，
而且制作方式都可能略有不同。有些使用Javascript，有些则只是纯CSS。既然有很多选择，这里只是几个不同的示例。但是请注意，如果需要的话，我有责任就“它们的工作方式”提出任何澄清性问题，因为解释每一个都将是重复性的，有一些细微的差异。一些还包括预编译器（例如，
LESS 或 SASS ，以便正常工作）：

快速样本1

body {

    background: #eee;

    font-family: arial, helvetica, sans-serif;

    margin: 50px auto;

    padding: 0;

}



h1 {

  font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;

  font-size: 36px;

  text-align: center;

}

h3 {

  font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;

  font-size: 22px;

  font-style: italic;

  color: #4e4e4e;

  text-align: center;

  margin-bottom: -100px;

}



#wrapper {

    width: 960px;

    margin: 0 auto;

}



#wrapper {

  perspective: 2500;

    -webkit-perspective: 2500;

    width: 800px;

    margin: 200px auto 0 auto;

  perspective-origin: 50% 150px;

    -webkit-perspective-origin: 50% 150px;

  transition: perspective, 1s;

  -o-transition: -o-perspective, 1s;

  -moz-transition: -moz-perspective, 1s;

    -webkit-transition: -webkit-perspective, 1s;

}



#image:hover {

  animation-play-state:paused;

  -o-animation-play-state:paused;

  -moz-animation-play-state:paused;

    -webkit-animation-play-state:paused;

}





@-webkit-keyframes spin {

    from {

    transform: rotateY(0);

    -o-transform: rotateY(0);

    -ms-transform: rotateY(0);

    -moz-transform: rotateY(0);

        -webkit-transform: rotateY(0);

    }

    to {

    transform: rotateY(-360deg);

    -o-transform: rotateY(-360deg);

    -ms-transform: rotateY(-360deg);

    -moz-transform: rotateY(-360deg);

        -webkit-transform: rotateY(-360deg);

    }

}



#image {

    margin: 0 auto;

    height: 300px;

    width: 400px;

  transform-style: preserve-3d;

    -webkit-transform-style: preserve-3d;

  animation: spin 24s infinite linear;

  -moz-animation: spin 24s infinite linear;

  -o-animation: spin 24s infinite linear;

    -webkit-animation: spin 24s infinite linear;

}



.image {

    position: absolute;

    height: 300px;

    width: 400px;

  border-radius: 25px;

    background-color: rgba(0,0,0,0.6);

    text-align: center;

    font-size: 20em;

    color: #fff;

}



#image > .i1 {

  transform: translateZ(485px);

  -moz-transform: translateZ(485px);

  -o-transform: translateZ(485px);

  -ms-transform: translateZ(485px);

  -webkit-transform: translateZ(485px);

}

#image > .i2 {

  transform: rotateY(45deg) translateZ(485px);

  -moz-transform: rotateY(45deg) translateZ(485px);

  -o-transform: rotateY(45deg) translateZ(485px);

  -ms-transform: rotateY(45deg) translateZ(485px);

  -webkit-transform: rotateY(45deg) translateZ(485px);

}

#image > .i3 {

  transform: rotateY(90deg) translateZ(485px);

  -moz-transform: rotateY(90deg) translateZ(485px);

  -o-transform: rotateY(90deg) translateZ(485px);

  -ms-transform: rotateY(90deg) translateZ(485px);

  -webkit-transform: rotateY(90deg) translateZ(485px);

}

#image > .i4 {

  transform: rotateY(135deg) translateZ(485px);

  -moz-transform: rotateY(135deg) translateZ(485px);

  -o-transform: rotateY(135deg) translateZ(485px);

  -ms-transform: rotateY(135deg) translateZ(485px);

  -webkit-transform: rotateY(135deg) translateZ(485px);

}

#image > .i5 {

  transform: rotateY(180deg) translateZ(485px);

  -moz-transform: rotateY(180deg) translateZ(485px);

  -o-transform: rotateY(180deg) translateZ(485px);

  -ms-transform: rotateY(180deg) translateZ(485px);

  -webkit-transform: rotateY(180deg) translateZ(485px);

}

#image > .i6 {

  transform: rotateY(225deg) translateZ(485px);

  -moz-transform: rotateY(225deg) translateZ(485px);

  -o-transform: rotateY(225deg) translateZ(485px);

  -ms-transform: rotateY(225deg) translateZ(485px);

  -webkit-transform: rotateY(225deg) translateZ(485px);

}

#image > .i7 {

  transform: rotateY(270deg) translateZ(485px);

  -moz-transform: rotateY(270deg) translateZ(485px);

  -o-transform: rotateY(270deg) translateZ(485px);

  -ms-transform: rotateY(270deg) translateZ(485px);

  -webkit-transform: rotateY(270deg) translateZ(485px);

}

#image > .i8 {

  transform: rotateY(315deg) translateZ(485px);

  -moz-transform: rotateY(315deg) translateZ(485px);

  -o-transform: rotateY(315deg) translateZ(485px);

  -ms-transform: rotateY(315deg) translateZ(485px);

  -webkit-transform: rotateY(315deg) translateZ(485px);

}



img {

  border-radius: 25px;


<body>

  <h1>View in Chrome or Safari</h1>

  <h3>(hover over to pause)</h3>

    <div id="wrapper">

        <div id="image">

            <div class="image i1"><img src="https://dl.dropbox.com/u/80409395/Codepen/Noe-in-leaves.jpg"></div>

            <div class="image i2"><img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-sitting.jpg"></div>

            <div class="image i3"><img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-noodles.jpg"></div>

            <div class="image i4"><img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-smiling.jpg"></div>

            <div class="image i5"><img src="https://dl.dropbox.com/u/80409395/Codepen/Girls-in-leaves.jpg"></div>

            <div class="image i6"><img src="https://dl.dropbox.com/u/80409395/Codepen/Natalie-smiling.jpg"></div>

            <div class="image i7"><img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-sleeping.jpg"></div>

            <div class="image i8"><img src="https://dl.dropbox.com/u/80409395/Codepen/Sledding.jpg"></div>

        </div>

    </div>

</body>

快速样本2

/* Create an array to hold the different image positions */

var itemPositions = [];

var numberOfItems = $('#scroller .item').length;



/* Assign each array element a CSS class based on its initial position */

function assignPositions() {

  for (var i = 0; i < numberOfItems; i++) {

    if (i === 0) {

      itemPositions[i] = 'left-hidden';

    } else if (i === 1) {

      itemPositions[i] = 'left';

    } else if (i === 2) {

      itemPositions[i] = 'middle';

    } else if (i === 3) {

      itemPositions[i] = 'right';

    } else {

      itemPositions[i] = 'right-hidden';

    }

  }

  /* Add each class to the corresponding element */

  $('#scroller .item').each(function(index) {

    $(this).addClass(itemPositions[index]);

  });

}



/* To scroll, we shift the array values by one place and reapply the classes to the images */

function scroll(direction) {

  if (direction === 'prev') {

    itemPositions.push(itemPositions.shift());

  } else if (direction === 'next') {

    itemPositions.unshift(itemPositions.pop());

  }

  $('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) {

    $(this).addClass(itemPositions[index]);

  });

}



/* Do all this when the DOMs ready */

$(document).ready(function() {



  assignPositions();

  var autoScroll = window.setInterval("scroll('next')", 4000);



  /* Hover behaviours */

  $('#scroller').hover(function() {

    window.clearInterval(autoScroll);

    $('.nav').stop(true, true).fadeIn(200);

  }, function() {

    autoScroll = window.setInterval("scroll('next')", 4000);

    $('.nav').stop(true, true).fadeOut(200);

  });



  /* Click behaviours */

  $('.prev').click(function() {

    scroll('prev');

  });

  $('.next').click(function() {

    scroll('next');

  });



});


html,

body {

  height: 100%;

  margin: 0;

}

body {

  background: -webkit-linear-gradient(top, #4D4D4D 0, #4D4D4D 180px, #939393 400px);

}

.warning {

  margin: 10px auto 0;

  width: 500px;

  text-align: center;

  font-size: 20px;

}

#scroller {

  width: 500px;

  height: 200px;

  margin: 0 auto;

  padding: 50px 0;

  -webkit-perspective: 500px;

  -moz-perspective: 500px;

  -o-perspective: 500px;

}

#scroller .item {

  width: 500px;

  display: block;

  position: absolute;

  border-radius: 10px;

  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255, 255, 255, 0.15)));

  -webkit-transition: all 0.4s ease-in-out;

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  z-index: 0;

}

/* Since inset shadows don't play nice with images, we'll create a pseudo element and apply our image styling to that instead */



#scroller .item:before {

  border-radius: 10px;

  width: 500px;

  display: block;

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.4);

}

#scroller .item img {

  display: block;

  border-radius: 10px;

}

#scroller .left {

  -webkit-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);

  -moz-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);

  -o-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);

}

#scroller .middle {

  z-index: 1;

  -webkit-transform: rotateY(0deg) translateX(0) scale(1);

  -moz-transform: rotateY(0deg) translateX(0) scale(1);

  -o-transform: rotateY(0deg) translateX(0) scale(1);

}

#scroller .right {

  -webkit-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);

  -moz-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);

  -o-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);

}

#scroller .left-hidden {

  opacity: 0;

  z-index: -1;

  -webkit-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);

  -moz-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);

  -o-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);

}

#scroller .right-hidden {

  opacity: 0;

  z-index: -1;

  -webkit-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);

  -moz-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);

  -o-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);

}

.nav {

  position: absolute;

  width: 500px;

  height: 30px;

  margin: 170px 0 0;

  z-index: 2;

  display: none;

}

.prev,

.next {

  position: absolute;

  display: block;

  height: 30px;

  width: 30px;

  background-color: rgba(0, 0, 0, 0.85);

  border-radius: 15px;

  color: #E4E4E4;

  bottom: 15px;

  left: 15px;

  text-align: center;

  line-height: 26px;

  cursor: pointer;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);

}

.next {

  left: inherit;

  right: 15px;

}

.prev:hover,

.next:hover {

  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="scroller">

  <div class="nav">

    <a class="prev">&laquo;</a>

    <a class="next">&raquo;</a>

  </div>

  <a class="item" href="#">

    <img src="http://i.imgur.com/5Mk3EfW.jpg" />

  </a>

  <a class="item" href="#">

    <img src="http://i.imgur.com/79aU67L.jpg" />

  </a>

  <a class="item" href="#">

    <img src="http://i.imgur.com/x3wSoFU.jpg" />

  </a>

  <a class="item" href="#">

    <img src="http://i.imgur.com/27fTqbA.jpg" />

  </a>

  <a class="item" href="#">

    <img src="http://i.imgur.com/RjdFV6n.jpg" />

  </a>

  <a class="item" href="#">

    <img src="http://i.imgur.com/6W8JOza.jpg" />

  </a>

  <a class="item" href="#">

    <img src="http://i.imgur.com/rwLY1JH.jpg" />

  </a>

</div>

快速样本3

$(function(){

  $('figure').on('click', function(){

    var nx = $(this).next().data('number') -1;

    if(nx<0){nx =0;}

    var delta =  -360 /9 * nx;





    $(this).parent().css("transform", "translateZ( -288px ) rotateY(" + delta + "deg )");



  });

})


.container {

  width: 210px;

  height: 140px;

  position: relative;

  perspective: 1000px;

  margin: 50px auto;

  border: 1px solid #bbb;

}



#carousel {

  width: 100%;

  height: 100%;

  position: absolute;

  transform-style: preserve-3d;

  transform: translateZ(-288px);

  transition: all 1s ease-in;

}



figure{margin: 0;}

#carousel figure {

  display: block;

  position: absolute;

  width: 186px;

  height: 116px;

  left: 10px;

  top: 10px;

  border: 2px solid black;

}



/* 40deg = 360/9 */

#carousel figure:nth-child(1) { transform: rotateY(   0deg ) translateZ( 288px ); }

#carousel figure:nth-child(2) { transform: rotateY(  40deg ) translateZ( 288px ); }

#carousel figure:nth-child(3) { transform: rotateY(  80deg ) translateZ( 288px ); }

#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }

#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }

#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }

#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }

#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }

#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }



.active{

  transform: translateZ( -288px ) rotateY( -160deg );

}



@keyframes spin {

    from { transform: rotateY(0); }

    to { transform: rotateY(360deg); }

}



#carousel {

    animation: spin 10s infinite linear;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="container">

  <div id="carousel">

    <figure data-number="1">1</figure>

    <figure data-number="2">2</figure>

    <figure data-number="3">3</figure>

    <figure data-number="4">4</figure>

    <figure data-number="5">5</figure>

    <figure data-number="6">6</figure>

    <figure data-number="7">7</figure>

    <figure data-number="8">8</figure>

    <figure data-number="9">9</figure>

  </div>

</section>

快速样本4：最佳IMO

body > div {

        width: 500px;

        margin: 50px auto;

        text-align: center;

    }



    figure {

        margin: 0;

    }



    .container {

        width: 500px;

        height: 300px;

        text-align: left;

        margin: 60px auto;

        -webkit-perspective: 1000px;

        -webkit-perspective-origin: 50% -25%;

    }



        .carousel {

            -webkit-transform-style: preserve-3d;

            -webkit-transform: translateZ(-540px);

            position: relative;

            margin: 0;

            width: 500px;

            height: 300px;

            -webkit-transition: 1s;

        }



            .carousel img {

                position: absolute;

                border: 15px solid rgba(0, 0, 0, .8);

                opacity: .5;

                -webkit-transition: 1s;

        width: 500px;

        height: 300px;

        background:#ccc;

            }





                .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8); }

                .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(.8); }

                .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(.8); }

                .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(.8); }

                .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(.8); }

                .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(.8); }

                .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(.8); }

                .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(.8); }



    label {

        cursor: pointer;

        background: #eee;

        display: inline-block;

        border-radius: 50%;

        width: 30px;

        padding-top: 7px;

        height: 23px;

        font: .9em Arial;

    }



    label:hover {

        background: #ddd;

    }



    input {

        position: absolute;

        left: -9999px;

    }



    input:checked + label {

        font-weight: bold;

        background: #ddd;

    }



        input[value="1"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px); }

        input[value="2"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-45deg); }

        input[value="3"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-90deg); }

        input[value="4"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-135deg); }

        input[value="5"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-180deg); }

        input[value="6"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-225deg); }

        input[value="7"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-270deg); }

        input[value="8"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-315deg); }



        input[value="1"]:checked ~ .container .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }

        input[value="2"]:checked ~ .container .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(1); opacity: 1; }

        input[value="3"]:checked ~ .container .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(1); opacity: 1; }

        input[value="4"]:checked ~ .container .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(1); opacity: 1; }

        input[value="5"]:checked ~ .container .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(1); opacity: 1; }

        input[value="6"]:checked ~ .container .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(1); opacity: 1; }

        input[value="7"]:checked ~ .container .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(1); opacity: 1; }

        input[value="8"]:checked ~ .container .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(1); opacity: 1; }


<body>



    <div>



        <input checked id="one" name="multiples" type="radio" value="1">

        <label for="one">1</label>



        <input id="two" name="multiples" type="radio" value="2">

        <label for="two">2</label>



        <input id="three" name="multiples" type="radio" value="3">

        <label for="three">3</label>



        <input id="four" name="multiples" type="radio" value="4">

        <label for="four">4</label>



        <input id="five" name="multiples" type="radio" value="5">

        <label for="five">5</label>



        <input id="six" name="multiples" type="radio" value="6">

        <label for="six">6</label>



        <input id="seven" name="multiples" type="radio" value="7">

        <label for="seven">7</label>



        <input id="eight" name="multiples" type="radio" value="8">

        <label for="eight">8</label>



        <div class="container">

            <div class="carousel">

                <img src="images/1.jpg" alt="Landscape 1">

                <img src="images/2.jpg" alt="Landscape 2">

                <img src="images/3.jpg" alt="Landscape 3">

                <img src="images/4.jpg" alt="Landscape 4">

                <img src="images/5.jpg" alt="Landscape 5">

                <img src="images/6.jpg" alt="Landscape 6">

                <img src="images/7.jpg" alt="Landscape 7">

                <img src="images/8.jpg" alt="Landscape 8">

            </div>

        </div>



    </div>



</body>

快速样本5

用途SCSS
〜源

快速样本6

var mycode = function(){



    //define variables

    var myPad = scrawl.pad.mycanvas,

        here,

        details = false,

        myPic,

        myPicPath,

        mySprite,

        mySpeed = 0,

        items = [

            'angelfish', 'blackbutterfly', 'cagedparrot', 'capuchin', 'greenparrot',

            'ibis', 'kookaburra', 'peacock', 'pelican', 'pinkcockatoo',

            'swallowtail', 'swan', 'tabbycats', 'terrapin', 'turkey'

            ],

        myGroup,

        myReflections,

        carousel,

        selectImage,

        unselectImage,

        checkClick,

        updateCarousel;



    //set background color for canvas

    scrawl.cell[myPad.base].set({

        backgroundColor: 'black',

        });



    //import images into scrawl library

    scrawl.getImagesByClass('demo');



    //define groups

    myGroup = scrawl.newGroup({

        name:   'myGroup',

        order:  2,

        });

    myReflections = scrawl.newGroup({

        name:   'myReflections',

        order:  1,

        });



    //define sprites - carousel

    carousel = scrawl.makeEllipse({

        name:       'carousel',

        startX:     375,

        startY:     200,

        radiusX:    300,

        radiusY:    100,

        method:     'none',

        });



    //define sprites - display photos

    for(var i = 0, z = items.length; i < z; i++){

        scrawl.newPicture({

            name:               items[i],

            group:              'myGroup',

            source:             items[i],

            width:              150,

            height:             100,

            strokeStyle:        'Gold',

            lineJoin:           'round',

            method:             'fillDraw',

            path:               'carousel',

            pathPlace:          i/z,

            pathSpeedConstant:  false,

            handleX:            'center',

            handleY:            '101%',

            }).clone({

            //and their reflections

            name:               items[i]+'_r',

            group:              'myReflections',

            globalAlpha:        0.32,

            flipUpend:          true,

            });

        }



    //event listener and associated functions

    selectImage = function(){

        myPic = myGroup.getSpriteAt(here);

        if(myPic){

            myPicPath = myPic.path;

            details = true;

            myPic.set({

                startX:     375,

                startY:     187.5,

                path:       false,

                scale:      3.7,

                order:      1000,

                handleY:    'center',

                });

            scrawl.sprite[myPic.name+'_r'].set({

                visibility: false,

                });

            scrawl.render();

            }

        };

    unselectImage = function(){

        if(myPic){

            myPic.set({

                handleY:    '101%',

                path:       myPicPath,

                });

            scrawl.sprite[myPic.name+'_r'].set({

                visibility: true,

                });

            }

        details = false;

        myPic = false;

        myPicPath = false;

        };

    checkClick = function(e){

        if(e){

            e.stopPropagation();

            e.preventDefault();

            }

        (details) ? unselectImage() : selectImage();

        };

    scrawl.canvas.mycanvas.addEventListener('mouseup', checkClick, false);



    //animation function

    updateCarousel = function(){

        if(!details){

            mySpeed = -((here.x - 375)/170000);

            for(var i = 0, z = items.length; i < z; i++){

                mySprite = scrawl.sprite[items[i]];

                mySprite.set({

                    scale: (mySprite.start.y/250)+0.5,

                    order: mySprite.start.y,

                    deltaPathPlace: mySpeed,

                    });

                mySprite = scrawl.sprite[items[i]+'_r'];

                mySprite.set({

                    scale: (mySprite.start.y/250)+0.5,

                    order: mySprite.start.y,

                    deltaPathPlace: mySpeed,

                    });

                }

            myGroup.updateStart();

            myReflections.updateStart();

            }

        myReflections.sortSprites();

        myGroup.sortSprites();

        myPad.stampBackground();

        for(var i = 0, z = items.length; i < z; i++){

            scrawl.sprite[myReflections.sprites[i]].stamp('clearWithBackground');

            scrawl.sprite[myReflections.sprites[i]].stamp();

            scrawl.sprite[myGroup.sprites[i]].stamp();

            }

        myPad.show();

        };



    //initial display of carousel - for safari

    here = {x: 350, y: 187.5, active: true};

    updateCarousel();

    updateCarousel();



    //animation object

    scrawl.newAnimation({

        fn: function(){

            here = myPad.getMouse();

            if(here.active){

                updateCarousel();

                }

            },

        });

    };



scrawl.loadModules({

    path: 'http://scrawl.rikweb.org.uk/js/',

    modules: ['images', 'animation', 'path', 'factories'],

    callback: function(){

        window.onload = function(){

            scrawl.init();

            mycode();

            };

        },

    });


img {

    position: fixed;

    visibility: hidden;

    }


<h2>3D Carousel effect with selectable items</h2>

<p>Move mouse over canvas to rotate the carousel. Click on an image to enlarge it, or to return to the carousel.</p>



<canvas id="mycanvas" width="750" height="375"></canvas>



<img src="http://scrawl.rikweb.org.uk/img/carousel/angelfish.png" id="angelfish" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/blackbutterfly.png" id="blackbutterfly" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/cagedparrot.png" id="cagedparrot" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/capuchin.png" id="capuchin" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/greenparrot.png" id="greenparrot" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/ibis.png" id="ibis" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/kookaburra.png" id="kookaburra" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/peacock.png" id="peacock" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/pelican.png" id="pelican" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/pinkcockatoo.png" id="pinkcockatoo" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/swallowtail.png" id="swallowtail" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/swan.png" id="swan" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/tabbycats.png" id="tabbycats" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/terrapin.png" id="terrapin" class="demo" />

<img src="http://scrawl.rikweb.org.uk/img/carousel/turkey.png" id="turkey" class="demo" />



<script src="http://scrawl.rikweb.org.uk/js/scrawlCore-min.js"></script>


 类似资料：
  • iOS实现3D卡片式轮播效果

    本文向大家介绍iOS实现3D卡片式轮播效果，包括了iOS实现3D卡片式轮播效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了iOS实现3D卡片式轮播效果的具体代码，供大家参考，具体内容如下 效果： 参考UITableView的UITableViewDataSource和UITableViewDelegate两个方法实现；支持五险轮播，可以加载本地图片，也可以加载网络图片，可以根据自

  • jQuery实现的3D版图片轮播示例【滑动轮播】

    本文向大家介绍jQuery实现的3D版图片轮播示例【滑动轮播】，包括了jQuery实现的3D版图片轮播示例【滑动轮播】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的3D版图片轮播。分享给大家供大家参考，具体如下： 这个是用了3张图，来回滑动，类似一个圆圈（不晓得这个 怎么上动图啊！！！！） 图就是这么个图，但是他是可以滑动的（不好描述啊！！） 贴代码比较方便。。。 布局

  • Swiper实现轮播图效果

    本文向大家介绍Swiper实现轮播图效果，包括了Swiper实现轮播图效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Swiper实现轮播图效果的具体代码，供大家参考，具体内容如下 最后 别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦! 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • jquery实现轮播图效果

    本文向大家介绍jquery实现轮播图效果，包括了jquery实现轮播图效果的使用技巧和注意事项，需要的朋友参考一下 效果如下： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！

  • flutter实现轮播图效果

    本文向大家介绍flutter实现轮播图效果，包括了flutter实现轮播图效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下 1 添加依赖库 2 普通常用 圆点指示器自动轮播图 3 自定圆点分页指示器 效果 4 自定数字 分页指示器 效果 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • jQuery文字轮播特效

    本文向大家介绍jQuery文字轮播特效，包括了jQuery文字轮播特效的使用技巧和注意事项，需要的朋友参考一下 闲谈：离开学校那座象牙塔已经也有大半年的事件了，生活中不再充满了茫然只有忙碌。连续加班加点大半个月，做的活动项目终于算是告一段落了，而今天也将是考验其真正价值的时候，现在将这次开发中遇到的问题做一下总结。 项目背景： 这次的项目主要是做一次全国酒店人气排名的营销活动，主要是基于在微信中传

相关阅读

flutter实现轮播图效果jQuery文字轮播特效Android自定义Banner轮播效果jquery实现焦点轮播效果图解js图片轮播效果

相关文章

CSS 3D转换Matplotlib 3D绘图JOGL 3D形状GWT Highcharts 3D图表JOGL 3D长方体

相关问答

光滑轮播响应断点vue3 - swiper 异型层叠轮播 ？javascript - 如何在 react 中实现饿了么 APP 首页轮播切换效果?echarts 3D渐变色不生效？javascript - js如何实现轮播N张连续图片实现gif动图效果？

相关工具

Mesa 3DMinesweeper 3DCura-3DOGRE 3DScorched 3D

相关文档

Cocos Creator 3D 用户手册 v1.2CSS Buttons 按钮效果目睹企业直播帮助文档获得场景视频 云点播文档获得场景视频 云直播文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.