マウスにあわせて3Dっぽくなるやつ

by kachibito

HTML

<html>
    <head>
        <script src="http://code.jquery.com/jquery-git.js"></script>
        <script src="http://3dify-jquery-plugin.googlecode.com/files/jquery.threedify.js"></script>
    </head>
    
    <body>
        
        <div id="div1">
            <div id="div2">
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                    <li>Item 6</li>
                </ul>
            </div>
        </div>
        <div id="div3">
            <div id="div4">
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                    <li>Item 6</li>
                </ul>
            </div>
        </div>
        
    </body>
</html>

CSS

#div1
{
    width:100%;
    height:300px;
    border: 1px solid black;
    perspective:200;
    -webkit-perspective:200;
    -webkit-perspective-origin:50% 50%;
    background:url(http://www.obiettivodigitale.com/wp-content/uploads/2009/08/grandangolo.jpg) no-repeat center center fixed;
    background-size:cover;
    -webkit-background-size: cover;

}

#div2
{
    position: relative;
    width: 150px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    margin-top:30px;
    background-color: #66C233;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 0 1px #47901A inset, -1px 0 1px 1px #FFFFFF inset, -1px 0 1px 1px #FFFFFF inset, 0 8px 15px -4px rgba(255, 255, 255, 0.4) inset, 0 -10px 19px -2px #88EE33 inset;
    
} 
#div3
{
    margin:20px;
    width:150px;
    position: relative;
    border: 1px solid black;
    perspective:150;
    -webkit-perspective:150;
    -webkit-perspective-origin:10% 50%;
}

#div4
{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: red;
} 

li, ul{
    margin:5px;
}
li {
    height:15px;
}

JavaScript

jQuery(document).ready(function($) {
    $('#div2').threedify({
        posZ: 0,
        angle: 10
    });
});
jQuery(document).ready(function($) {
    $('#div4').threedify({
        posZ: 3,
        angle: 25
    });
});