Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > css transform 3D slide effect

css transform 3D slide effect

高洛峰
Release： 2016-11-24 11:35:19
Original
1406 people have browsed it

JS

[javascript]
$(function(){ 
    var length = $(".container a").length; 
    var $items = $(".container a"); 
 
    $items.on("transitionend", function(event){ 
        $items.removeClass("trans"); 
    }); 
 
    $(".container a").each(function(index, value){ 
        var $child = $(this); 
        if (index === 0) { 
            $child.addClass("current showing"); 
        } else if (index === 1) { 
            $child.addClass("left showing"); 
        } else if (index == 2) { 
            $child.addClass("out-left"); 
        } else if (index == (length - 2)) { 
            $child.addClass("out-right"); 
        } else if (index === (length - 1)) { 
            $child.addClass("right showing"); 
        } else { 
            $child.addClass("hiding"); 
        };
Copy after login

  
         

        $child.click(function(){ 
            var $item = $(this); 
            //next item   
            var $nextItem = (index === (length - 1)) ?  $items.eq(0) : $items.eq(index + 1); 
            //previous item  
            var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1); 
            var $rightItem; 
            if(index == 0){ 
                $rightItem = $items.eq(length - 2); 
            } else if (index == 1) { 
                $rightItem = $items.eq(length - 1); 
            } else { 
                $rightItem = $items.eq(index - 2); 
            } 
            var $leftItem; 
            if(index == length - 2){ 
                $leftItem = $items.eq(0); 
            } else if (index == length - 1) { 
                $leftItem = $items.eq(1); 
            } else { 
                $leftItem = $items.eq(index + 2); 
            }
Copy after login
            //current item click,return  
            if ($item.hasClass("current")) { 
                return false; 
            } else if ($item.hasClass("left")) { 
                //center move right  
                $preItem.attr("class","trans right showing"); 
                //left move center  
                $item.attr("class","trans current showing"); 
                //right item move out  
                $rightItem.attr("class","trans out-right"); 
                //next move left  
                $nextItem.attr("class","trans left showing"); 
                //left ready  
                $leftItem.attr("class","out-left"); 
            } else if ($item.hasClass("right")) { 
                //center move left  
                $nextItem.attr("class","trans left showing"); 
                //right move center  
                $item.attr("class","trans current showing"); 
                //left item clear  
                $leftItem.attr("class","trans out-left"); 
                //previous move right  
                $preItem.attr("class","trans right showing"); 
                //right ready  
                $rightItem.attr("class","out-right"); 
            }; 
        }); 
    }); 
});
Copy after login
$(function(){
 var length = $(".container a").length;
 var $items = $(".container a");
Copy after login
 $items.on("transitionend", function(event){
  $items.removeClass("trans");
 });
Copy after login
 $(".container a").each(function(index, value){
  var $child = $(this);
  if (index === 0) {
   $child.addClass("current showing");
  } else if (index === 1) {
   $child.addClass("left showing");
  } else if (index == 2) {
   $child.addClass("out-left");
  } else if (index == (length - 2)) {
   $child.addClass("out-right");
  } else if (index === (length - 1)) {
   $child.addClass("right showing");
  } else {
   $child.addClass("hiding");
  };
Copy after login

  

  $child.click(function(){
   var $item = $(this);
   //next item
   var $nextItem = (index === (length - 1)) ?  $items.eq(0) : $items.eq(index + 1);
   //previous item
   var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1);
   var $rightItem;
   if(index == 0){
    $rightItem = $items.eq(length - 2);
   } else if (index == 1) {
    $rightItem = $items.eq(length - 1);
   } else {
    $rightItem = $items.eq(index - 2);
   }
   var $leftItem;
   if(index == length - 2){
    $leftItem = $items.eq(0);
   } else if (index == length - 1) {
    $leftItem = $items.eq(1);
   } else {
    $leftItem = $items.eq(index + 2);
   }
Copy after login
   //current item click,return
   if ($item.hasClass("current")) {
    return false;
   } else if ($item.hasClass("left")) {
    //center move right
    $preItem.attr("class","trans right showing");
    //left move center
    $item.attr("class","trans current showing");
    //right item move out
    $rightItem.attr("class","trans out-right");
    //next move left
    $nextItem.attr("class","trans left showing");
    //left ready
    $leftItem.attr("class","out-left");
   } else if ($item.hasClass("right")) {
    //center move left
    $nextItem.attr("class","trans left showing");
    //right move center
    $item.attr("class","trans current showing");
    //left item clear
    $leftItem.attr("class","trans out-left");
    //previous move right
    $preItem.attr("class","trans right showing");
    //right ready
    $rightItem.attr("class","out-right");
   };
  });
 });
});
Copy after login
html
[html]
<html> 
<head> 
    <title>slideshow</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head> 
<body> 
    <div class="container"> 
        <div class="wapper"> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.jpg" alt="10"/></a> 
        </div> 
    </div> 
     
    <script type="text/javascript" src="jquery-1.8.3.js"></script> 
    <script type="text/javascript" src="slide.js"></script> 
</body> 
</html>
Copy after login
<html>
<head>
 <title>slideshow</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head>
<body>
 <div class="container">
  <div class="wapper">
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.jpg" alt="10"/></a>
  </div>
 </div>
 
 <script type="text/javascript" src="jquery-1.8.3.js"></script>
 <script type="text/javascript" src="slide.js"></script>
</body>
</html>
Copy after login

css

[css]
body,div{margin: 0;padding: 0;} 
.container{width: 100%;height: 450px; position: relative;} 
.container .wapper{margin: 0 auto; width: 480px;height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-transform-style: preserve-3d;-moz-perspective: 1000px;} 
.container a{display: block;position: absolute;left: 0;top: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor: pointer;} 
.container a img{width: 480px;height: 300px;display: block;border: 0;} 
.container .current{z-index: 2;} 
.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;} 
.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;} 
.showing{opacity: 1;visibility: visible;} 
.hiding{opacity: 0;visibility: hidden;} 
.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility: hidden;} 
.out-left{-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);z-index: 1;opacity: 0;visibility: hidden;} 
.trans{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
Copy after login
body,div{margin: 0;padding: 0;}
.container{width: 100%;height: 450px; position: relative;}
.container .wapper{margin: 0 auto; width: 480px;height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-transform-style: preserve-3d;-moz-perspective: 1000px;}
.container a{display: block;position: absolute;left: 0;top: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor: pointer;}
.container a img{width: 480px;height: 300px;display: block;border: 0;}
.container .current{z-index: 2;}
.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;}
.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;}
.showing{opacity: 1;visibility: visible;}
.hiding{opacity: 0;visibility: hidden;}
.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility: hidden;}
.out-left{-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);z-index: 1;opacity: 0;visibility: hidden;}
.trans{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
Copy after login


demo
demo


Related labels：
css transform
source：php.cn
Previous article：css implements forced non-line wrapping/automatic line wrapping/forced line wrapping Next article：css text wrapping properties word-wrap and white-space
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1335
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
From 2024-04-06 20:57:16
0
1
487
How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
From 2024-04-06 20:45:26
0
2
386
Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
From 2024-04-06 20:41:51
0
1
518
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template