HTML5播放效果

Question

我看到一些幻燈片顯示像 http://slides.html5rocks.com和 http://www.htmlfivewow.com

當按下左右鍵，你會看到幻燈片立方體效果。 我想用這些效果製作簡單的網頁，只需幾個div。我試圖從源代碼中獲取CSS和JavaScript，但幻燈片無法工作。

1. 當動畫時，div沒有3D風格，它只是移動和旋轉。實際上，http://slides.html5rocks.com在我的Firefox中沒有3D效果，而在Chrome中。
2. 有沒有教程？
3. 這怎麼能在IE 10中工作？

下面是我的一些代碼： HTML：

<div class="container"> 
    <div id="div1" class="main slide current"> ... </div> 
    <div id="div2" class="main slide future"> ... </div> 
    <div id="div3" class="main slide future"> ... </div> 
</div> 

CSS：

.container { 
    height: 100%; 
    margin-left:auto; 
    margin-right:auto; 
    width:800px; 
    overflow: visible; 
    visibility: visible; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 
.main{ 
    border: 1px solid; 
    border-color: white; 
    border-radius: 15px 15px 0 0 ; 
    width: 100%; 
    min-height: 450px; 
    text-align: center; 
    padding: 5px; 
} 

.slide { 
    width: 800px; 
    height: 450px; 
    -webkit-transition: -webkit-transform 0.8s ease-in-out, opacity 1.2s ease-in-out; 
    -moz-transition: -moz-transform 0.8s ease-in-out, opacity 1.2s ease-in-out; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    box-orient: vertical; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    overflow: hidden; 
    display: none; 
    position: absolute; 
} 
.slide.past { 
    z-index: 8; 
    visibility: visible; 
    display: block; 
    opacity: 0; 
    -webkit-transform: translateZ(-400px) rotateY(-90deg) translateZ(400px); 
    -moz-transform: translateZ(-400px) rotateY(-90deg) translateZ(400px); 
    -o-transform: translateZ(-400px) rotateY(-90deg) translateZ(6400px); 
    transform: translateZ(-400px) rotateY(-90deg) translateZ(400px); 
} 
.slide.current { 
    z-index: 9; 
    visibility: visible; 
    display: block; 
    opacity: 1; 
    -webkit-transform: translateZ(-400px) rotateY(0deg) translateZ(400px); 
    -moz-transform: translateZ(-400px) rotateY(0deg) translateZ(400px); 
    -o-transform: translateZ(-400px) rotateY(0deg) translateZ(400px); 
    transform: translateZ(-400px) rotateY(0deg) translateZ(400px); 
} 
.slide.future { 
    z-index: 8; 
    visibility: visible; 
    display: block; 
    opacity: 0; 
    -webkit-transform: translateZ(-400px) rotateY(90deg) translateZ(400px); 
    -moz-transform: translateZ(-400px) rotateY(90deg) translateZ(400px); 
    -o-transform: translateZ(-400px) rotateY(90deg) translateZ(400px); 
    transform: translateZ(-400px) rotateY(90deg) translateZ(400px); 
} 

腳本：

$("#div1").attr("class", "main slide future"); 
$("#div2").attr("class", "main slide current"); 

Answer 1

HTML

<h1>Slider</h1> 
<div id="slider"> 
    <a href="#" class="control_next">>></a> 
    <a href="#" class="control_prev"><</a> 
    <ul> 
    <li>SLIDE 1</li> 
    <li style="background: #aaa;">SLIDE 2</li> 
    <li>SLIDE 3</li> 
    <li style="background: #aaa;">SLIDE 4</li> 
    </ul> 
</div> 

<div class="slider_option"> 
    <input type="checkbox" id="checkbox"> 
    <label for="checkbox">Autoplay Slider</label> 
</div> 

CSS

html { 
    border-top: 5px solid #fff; 
    background: #58DDAF; 
    color: #2a2a2a; 
} 

html, body { 
    margin: 0; 
    padding: 0; 
    font-family: 'Open Sans'; 
} 

h1 { 
    color: #fff; 
    text-align: center; 
    font-weight: 300; 
} 

#slider { 
    position: relative; 
    overflow: hidden; 
    margin: 20px auto 0 auto; 
    border-radius: 4px; 
} 

#slider ul { 
    position: relative; 
    margin: 0; 
    padding: 0; 
    height: 200px; 
    list-style: none; 
} 

#slider ul li { 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    height: 300px; 
    background: #ccc; 
    text-align: center; 
    line-height: 300px; 
} 

a.control_prev, a.control_next { 
    position: absolute; 
    top: 40%; 
    z-index: 999; 
    display: block; 
    padding: 4% 3%; 
    width: auto; 
    height: auto; 
    background: #2a2a2a; 
    color: #fff; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 18px; 
    opacity: 0.8; 
    cursor: pointer; 
} 

a.control_prev:hover, a.control_next:hover { 
    opacity: 1; 
    -webkit-transition: all 0.2s ease; 
} 

a.control_prev { 
    border-radius: 0 2px 2px 0; 
} 

a.control_next { 
    right: 0; 
    border-radius: 2px 0 0 2px; 
} 

.slider_option { 
    position: relative; 
    margin: 10px auto; 
    width: 160px; 
    font-size: 18px; 
} 

的JavaScript

jQuery(document).ready(function ($) { 

    $('#checkbox').change(function(){ 
    setInterval(function() { 
     moveRight(); 
    }, 3000); 
    }); 

    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $('#slider').css({ width: slideWidth, height: slideHeight }); 

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    $('#slider ul li:last-child').prependTo('#slider ul'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
     }, 200, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    function moveRight() { 
     $('#slider ul').animate({ 
      left: - slideWidth 
     }, 200, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    $('a.control_prev').click(function() { 
     moveLeft(); 
    }); 

    $('a.control_next').click(function() { 
     moveRight(); 
    }); 

});