3D 旋轉圖形

<img src="/wp-content/uploads/mini/mini.jpg" width="200" height="200"<!-- [et_pb_line_break_holder] --> class="reel"<!-- [et_pb_line_break_holder] --> id="image"<!-- [et_pb_line_break_holder] --> data-images="/wp-content/uploads/mini/###.jpg"<!-- [et_pb_line_break_holder] --> data-frames="20"<!-- [et_pb_line_break_holder] --> data-frame="14"<!-- [et_pb_line_break_holder] --> data-rows="6"<!-- [et_pb_line_break_holder] --> data-row="3"<!-- [et_pb_line_break_holder] --> data-speed="0.3"><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <div class="reel-annotation"<!-- [et_pb_line_break_holder] --> id="first_row"<!-- [et_pb_line_break_holder] --> data-start="1"<!-- [et_pb_line_break_holder] --> data-end="20"<!-- [et_pb_line_break_holder] --> data-x="10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100,105"<!-- [et_pb_line_break_holder] --> data-y="10"<!-- [et_pb_line_break_holder] --> data-for="image"><!-- [et_pb_line_break_holder] --> First Row<!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> <div class="reel-annotation"<!-- [et_pb_line_break_holder] --> id="last_row"<!-- [et_pb_line_break_holder] --> data-start="101"<!-- [et_pb_line_break_holder] --> data-end="120"<!-- [et_pb_line_break_holder] --> data-x="105,100,95,90,85,80,75,70,65,60,55,50,45,40,35,30,25,20,15,10"<!-- [et_pb_line_break_holder] --> data-y="175"<!-- [et_pb_line_break_holder] --> data-for="image"><!-- [et_pb_line_break_holder] --> Last Row<!-- [et_pb_line_break_holder] --> </div>

<img src="/wp-content/uploads/teapot/green/1.png" width="160" height="120"<!-- [et_pb_line_break_holder] --> class="reel"<!-- [et_pb_line_break_holder] --> id="images2"<!-- [et_pb_line_break_holder] --> data-images="/wp-content/uploads/teapot/green/#.png"<!-- [et_pb_line_break_holder] --> data-frames="6"<!-- [et_pb_line_break_holder] --> data-loops="false"<!-- [et_pb_line_break_holder] --> data-speed="0.5"<!-- [et_pb_line_break_holder] --> data-revolution="100">

<button id="green" style="background-color:green;width:80px;padding:10px;color:white;">Green</button><!-- [et_pb_line_break_holder] --> <button id="blue" style="background-color:blue;width:80px;padding:10px;color:white;">Blue</button>

<script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $('#blue').click(function(){<!-- [et_pb_line_break_holder] --> $('#images2').reel('images', '/wp-content/uploads/teapot/blue/#.png');<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $('#green').click(function(){<!-- [et_pb_line_break_holder] --> $('#images2').reel('images', '/wp-content/uploads/teapot/green/#.png');<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> </script>