Aui-core结合css实现可旋转三维图片墙效果代码-html代码-BFW代码库

Aui-core结合css实现可旋转三维图片墙效果代码

代码语言：html

代码描述：Aui-core结合css实现可旋转三维图片墙效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>



    <style>

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }



        body {
            background: black;
            overflow: hidden;
        }



        #stage {

            width: 200px;
            height: 300px;
            position: relative;
            margin: 0 auto;
            margin-top: 150px;
            background: null;



            -webkit-transform: rotateX(-10deg) rotateY(0deg) perspective(2000px);

            -moz-transform: rotateX(-10deg) rotateY(0deg) perspective(2000px);

            -ms-transform: rotateX(-10deg) rotateY(0deg) perspective(2000px);

            -o-transform: rotateX(-10deg) rotateY(0deg) perspective(2000px);

            transform: rotateX(-10deg) rotateY(0deg) perspective(2000px);



            -webkit-transform-style: preserve-3d;

            -moz-transform-style: preserve-3d;

            -ms-transform-style: preserve-3d;

            -o-transform-style: preserve-3d;

            transform-style: preserve-3d;

        }

        #shadow {

            position: absolute;
            left: 50%;
            top: 50%;
            width: 1200px;
            height: 1200px;
            margin-left: -600px;
            margin-top: -600px;



            background: -webkit-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));

            background: -moz-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));

            background: -ms-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));

            background: -o-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));

            background: radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));



            -webkit-transform: translateY(200px) rotateX(90deg);

            -moz-transform: translateY(200px) rotateX(90deg);

            -ms-transform: translateY(200px) rotateX(90deg);

            -o-transform: translateY(200px) rotateX(90deg);

            transform: translateY(200px) rotateX(90deg);

        }



        #stage dd {



            height: 300px;
            width: 200px;
            position: absolute;
            left: 0;
            top: 0;
            border: 1px solid #666;



            -webkit-transition: 500ms all ease;

            -moz-transition: 500ms all ease;

            -ms-transition: 500ms all ease;

            -o-transition: 500ms all ease;

            transition: 500ms all ease;

        }

        .over {

            position: absolute;
            left: 0;
            top.........完整代码请登录后点击上方下载按钮下载查看