jQuery ui三维动态可调节滑块效果

使用方法：

引入必要CSS、JS文件

<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="sliders.js"></script>

HTML结构

<div class="main">
    <!-- The sliders -->
    
    <div class="colorful-slider blue">
    <div class="slider-handle"></div>
    </div>
    
    <div class="colorful-slider green">
    <div class="slider-handle"></div>
    </div>
    
    <div class="colorful-slider orange">
    <div class="slider-handle"></div>
    </div>
    
    
    <div class="cube-area">
    
        <!-- The colorful bars -->
        
        <div class="cuboid blue">
        <div class="cu-top"></div>
        <div class="cu-mid"></div>
        <div class="cu-bottom"></div>
        </div>
        
        <div class="cuboid green">
        <div class="cu-top"></div>
        <div class="cu-mid"></div>
        <div class="cu-bottom"></div>
        </div>gt;
        
        <div class="cuboid orange">
        <div class="cu-top"></div>
        <div class="cu-mid"></div>
        <div class="cu-bottom"></div>
        </div>
        
        <!-- The perspective div is CSS3 transformed -->
        
        <div class="perspective">
        </div>
    </div>
    
    <!-- Old school float clearing -->
    <div class="clear"></div>
</div>