div+css布局实现三维傀儡人动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：div+css布局实现三维傀儡人动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    /*--Colors--*/
#breast > div {
    background-color:#363636;
}

#trunk div {
    background-color:#6b6b6b;
}

#waist div {
    background-color:#91ffc4;
}

[id*="-shoulder"] div {
    background-color:#585858;
    background-image:-webkit-linear-gradient(right, #585858 20%, #a3a3a3);
    background-image:-moz-linear-gradient(right, #585858 20%, #a3a3a3);
    background-image:-o-linear-gradient(right, #585858 20%, #a3a3a3);
    background-image:-ms-linear-gradient(right, #585858 20%, #a3a3a3);
    background-image:linear-gradient(to left, #585858 20%, #a3a3a3);
}

[id*="-elbow"] div {
    background-color:#6b6b6b;
}

[id*="-thigh"] .tire-grip {
    background-color:#242424;
    background-image:-webkit-linear-gradient(right, #242424, #c7c7c7);
    background-image:-moz-linear-gradient(right, #242424, #c7c7c7);
    background-image:-o-linear-gradient(right, #242424, #c7c7c7);
    background-image:-ms-linear-gradient(right, #242424, #c7c7c7);
    background-image:linear-gradient(to left, #242424, #c7c7c7);
}

[id*="-knees"] .tire-grip {
    background-color:rgba(252, 46, 56, 1.00) !important;
    background-image:-webkit-linear-gradient(right, #919191, #d9d9d9);
    background-image:-moz-linear-gradient(right, #919191, #d9d9d9);
    background-image:-o-linear-gradient(right, #919191, #d9d9d9);
    background-image:-ms-linear-gradient(right, #919191, #d9d9d9);
    background-image:linear-gradient(to left, #919191, #d9d9d9);
}

#face .tire-grip,
#head .tire-grip,
#head-ceil {
    background-color:#494949;
    background-image:-webkit-linear-gradient(right, #363636, #484848);
    background-image:-moz-linear-gradient(right, #363636, #484848);
    background-image:-o-linear-gradient(right, #363636, #484848);
    background-image:-ms-linear-gradient(right, #363636, #484848);
    background-image:linear-gradient(to left, #363636, #484848);
}

[id*="-toe"] .face {
    background-color:#494949;
}

[id*="-hand"] .face {
    background-color:rgba(72, 72, 72, 1.00) !important;
}

/*--Global--*/
body {
    padding:0;
    margin:0;
    overflow-x:hidden;
    background-color:black;
    width:100%;
}

.base div {
    position:absolute;
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
}

#wrapper {
    width:100%;
    height:100%;
    position:fixed;
}

.centering {
    left:50%;
    top:50%;
    margin-left:-200px;
    margin-top:-200px;
    width:400px;
    height:400px;
    position:absolute;
}

/*--Basic Setting--*/
.base {
    position:absolute;
    width:400px;
    height:400.0px;
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
    -webkit-transform:translate3d(0.00px,0.00px,0px);
       -moz-transform:translate3d(0.00px,0.00px,0px);
         -o-transform:translate3d(0.00px,0.00px,0px);
        -ms-transform:translate3d(0.00px,0.00px,0px);
            transform:translate3d(0.00px,0.00px,0px);
}

#middle {
    -webkit-transform:translate3d(-42.00px,63px,235.00px) rotate(-17.00deg);
       -moz-transform:translate3d(-42.00px,63px,235.00px) rotate(-17.00deg);
         -o-transform:translate3d(-42.00px,63px,235.00px) rotate(-17.00deg);
        -ms-transform:translate3d(-42.00px,63px,235.00px) rotate(-17.00deg);
            transform:translate3d(-42.00px,63px,235.00px) rotate(-17.00deg);
}

#face {
    -webkit-transform:translate3d(198.00px,289.00px,257.30px) rotate(-109.00deg) scale3d(0.50, 0.50, 0.15);
       -moz-transform:translate3d(198.00px,289.00px,257.30px) rotate(-109.00deg) scale3d(0.50, 0.50, 0.15);
         -o-transform:translate3d(198.00px,289.00px,257.30px) rotate(-109.00deg) scale3d(0.50, 0.50, 0.15);
        -ms-transform:translate3d(198.00px,289.00px,257.30px) rotate(-109.00deg) scale3d(0.50, 0.50, 0.15);
            transform:translate3d(198.00px,289.00px,257.30px) rotate(-109.00deg) scale3d(0.50, 0.50, 0.15);
}

#face .tire-grip {
    width:100.0px;
    height:9.0px;
}

#face .r360-1 {
}

#face .r360-2 {
    -webkit-transform:translate3d(141px,-41px,0.00px) rotate(0.00deg) rotateZ(90.00deg);
       -moz-transform:translate3d(141px,-41px,0.00px) rotate(0.00deg) rotateZ(90.00deg);
         -o-transform:translate3d(141px,-41px,0.00px) rotate(0.00deg) rotateZ(90.00deg);
        -ms-transform:translate3d(141px,-41px,0.00px) rotate(0.00deg) rotateZ(90.00deg);
            transform:translate3d(141px,-41px,0.00px) rotate(0.00deg) rotateZ(90.00deg);
}

#face .r360-2 .r1 {
    -webkit-transform:translate3d(-8.40px,44.80px,51px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg) rotateZ(90.00deg) scale3d(2.00, 2.00, 2.00);
       -moz-transform:translate3d(-8.40px,44.80px,51px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg) rotateZ(90.00deg) scale3d(2.00, 2.00, 2.00);
         -o-transform:translate3d(-8.40px,44.80px,51px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg) rotateZ(90.00deg) scale3d(2.00, 2.00, 2.00);
        -ms-transform:translate3d(-8.40px,44.80px,51px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg) rotateZ(90.00deg) scale3d(2.00, 2.00, 2.00);
            transform:translate3d(-8.40px,44.80px,51px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg) rotateZ(90.00deg) scale3d(2.00, 2.00, 2.00);
}

#face .r360-1 .r9 {
    -webkit-transform:translate3d(32.50px,94.20px,51px) rotate(0.00deg) rotateX(90.00deg) rotateY(10.00deg) rotateZ(90.00deg) scale3d(2, 2, 2);
       -moz-transform:translate3d(32.50px,94.20px,51px) rotate(0.00deg) rotateX(90.00deg) rotateY(10.00deg) rotateZ(90.00deg) scale3d(2, 2, 2);
         -o-transform:translate3d(32.50px,94.20px,51px) rotate(0.00deg) rotateX(90.00deg) rotateY(10.00deg) rotateZ(90.00deg) scale3d(2, 2, 2);
        -ms-transform:translate3d(32.50px,94.20px,51px) rotate(0.00deg) rotateX(90.00deg) rotateY(10.00deg) rotateZ(90.00deg) scale3d(2, 2, 2);
            transform:translate3d(32.50px,94.20px,51px) rotate(0.00deg) rotateX(90.00deg) rotateY(10.00deg) rotateZ(90.00deg) scale3d(2, 2, 2);
}

#chin {
    background-color:#000000;
    width:50px;
    height:50px;
    border-radius:25.0px;
}

#chin-mask {
    width:50.0px;
    height:27.0px;
    -webkit-transform:translate3d(184.70px,235.30px,249.80px) rotate(-14.00deg) rotateX(180.00deg) rotateZ(0.00deg) scale(0.999);
       -moz-transform:translate3d(184.70px,235.30px,249.80px) rotate(-14.00deg) rotateX(180.00deg) rotateZ(0.00deg) scale(0.999);
         -o-transform:translate3d(184.70px,235.30px,249.80px) rotate(-14.00deg) rotateX(180.00deg) rotateZ(0.00deg) scale(0.999);
        -ms-transform:translate3d(184.70px,235.30px,249.80px) rotate(-14.00deg) rotateX(180.00deg) rotateZ(0.00deg) scale(0.999);
            transform:translate3d(184.70px,235.30px,249.80px) rotate(-14.00deg) rotateX(180.00deg) rotateZ(0.00deg) scale(0.999);
    overflow:hidden;
}

#eyes {
    background-color:#121212;
    width:49.0px;
    height:25.0px;
    -webkit-transform:translate3d(182.80px,227.00px,265.09px) rotate(-15.00deg) rotateX(90.00deg) rotateY(180.00deg) scale3d(1.00, 1.10, 1.00);
       -moz-transform:translate3d(182.80px,227.00px,265.09px) rotate(-15.00deg) rotateX(90.00deg) rotateY(180.00deg) scale3d(1.00, 1.10, 1.00);
         -o-transform:translate3d(182.80px,227.00px,265.09px) rotate(-15.00deg) rotateX(90.00deg) rotateY(180.00deg) scale3d(1.00, 1.10, 1.00);
        -ms-transform:translate3d(182.80px,227.00px,265.09px) rotate(-15.00deg) rotateX(90.00deg) rotateY(180.00deg) scale3d(1.00, 1.10, 1.00);
            transform:translate3d(182.80px,227.00px,265.09px) rotate(-15.00deg) rotateX(90.00deg) rotateY(180.00deg) scale3d(1.00, 1.10, 1.00);
}

#left-eye {
    background-color:#fed112;
    width:15.0px;
    height:14.0px;
    border-radius:15px;
    -webkit-filter:blur(1px);
       -moz-filter:blur(1px);
         -o-filter:blur(1px);
        -ms-filter:blur(1px);
            filter:blur(1px);
}

#left-eye-mask {
    width:17.0px;
    height:6.0px;
    -webkit-transform:translate3d(28px,19.00px,3.00px) rotate(0.00deg) skew(0.00deg, 0.00deg);
       -moz-transform:translate3d(28px,19.00px,3.00px) rotate(0.00deg) skew(0.00deg, 0.00deg);
         -o-transform:translate3d(28px,19.00px,3.00px) rotate(0.00deg) skew(0.00deg, 0.00deg);
        -ms-transform:translate3d(28px,19.00px,3.00px) rotate(0.00deg) skew(0.00deg, 0.00deg);
            transform:translate3d(28px,19.00px,3.00px) rotate(0.00deg) skew(0.00deg, 0.00deg);
    overflow:hidden;
}

#right-eye-mask {
    width:17.0px;
    height:6.0px;
    overflow:hidden;
    -webkit-transform:translate3d(6px,19.00px,3.00px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg);
       -moz-transform:translate3d(6px,19.00px,3.00px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg);
         -o-transform:translate3d(6px,19.00px,3.00px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg);
        -ms-transform:translate3d(6px,19.00px,3.00px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg);
            transform:translate3d(6px,19.00px,3.00px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg);
}

#right-eye {
    background-color:#fed112;
    width:15.0px;
    height:14.0px;
    border-radius:15px;
    -webkit-filter:blur(1px);
       -moz-filter:blur(1px);
         -o-filter:blur(1px);
        -ms-filter:blur(1px);
            filter:blur(1px);
}

#head-ceil {
    width:100px;
    height:100px;
    -webkit-transform:translate3d(41px,0.00px,51px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg);
       -moz-transform:translate3d(41px,0.00px,51px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg);
         -o-transform:translate3d(41px,0.00px,51px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg);
        -ms-transform:translate3d(41px,0.00px,51px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg);
            transform:translate3d(41px,0.00px,51px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg);
    border-radius:51.0px;
}

#head-ceil2 {
    background-color:#000000;
    width:100px;
    height:100px;
    -webkit-transform:translate3d(41.00px,0.00px,-49.99px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg) scale(0.99);
       -moz-transform:translate3d(41.00px,0.00px,-49.99px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg) scale(0.99);
         -o-transform:translate3d(41.00px,0.00px,-49.99px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg) scale(0.99);
        -ms-transform:translate3d(41.00px,0.00px,-49.99px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg) scale(0.99);
            transform:translate3d(41.00px,0.00px,-49.99px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg) scale(0.99);
    border-radius:51.0px;
}

#head {
    -webkit-transform:translate3d(150.00px,206.00px,299px) scale3d(0.60, 0.60, 0.40);
       -moz-transform:translate3d(150.00px,206.00px,299px) scale3d(0.60, 0.60, 0.40);
         -o-transform:translate3d(150.00px,206.00px,299px) scale3d(0.60, 0.60, 0.40);
        -ms-transform:translate3d(150.00px,206.00px,299px) scale3d(0.60, 0.60, 0.40);
            transform:translate3d(150.00px,206.00px,299px) scale3d(0.60, 0.60, 0.40);
}

#head .tire-grip {
    width:100.0px;
    height:9.0px;
    -webkit-backface-visibility:visible;
       -moz-backface-visibility:visible;
         -o-backface-visibility:visible;
        -ms-backface-visibility:visible;
            backface-visibility:visible;
}

#head .r360-1 {
}

#head .r360-2 {
    -webkit-transform:translate3d(141px,-41px,0.00px) rotate(0.00deg) rotateZ(90.00deg);
       -moz-transform:translate3d(141px,-41px,0.00px) rotate(0.00deg) rotateZ(90.00deg);
         -o-transform:translate3d(141px,-41px,0.00px) rotate(0.00deg) rotateZ(90.00deg);
        -ms-transform:translate3d(141px,-41px,0.00px) rotate(0.00deg) rotateZ(90.00deg);
            transform:translate3d(141px,-41px,0.00px) rotate(0.00deg) rotateZ(90.00deg);
}

#head .r360-3 {
    -webkit-transform:translate3d(183px,100px,0.00px) rotate(0.00deg) rotateZ(180.00deg);
       -moz-transform:translate3d(183px,100px,0.00px) rotate(0.00deg) rotateZ(180.00deg);
         -o-transform:translate3d(183px,100px,0.00px) rotate(0.00deg) rotateZ(180.00deg);
        -ms-transform:translate3d(183px,100px,0.00px) rotate(0.00deg) rotateZ(180.00deg);
            transform:translate3d(183px,100px,0.00px) rotate(0.00deg) rotateZ(180.00deg);
}

#head .r360-4 {
    -webkit-transform:translate3d(42.00px,141px,0.00px) rotate(0.00deg) rotateZ(270.00deg);
       -moz-transform:translate3d(42.00px,141px,0.00px) rotate(0.00deg) rotateZ(270.00deg);
         -o-transform:translate3d(42.00px,141px,0.00px) rotate(0.00deg) rotateZ(270.00deg);
        -ms-transform:translate3d(42.00px,141px,0.00px) rotate(0.00deg) rotateZ(270.00deg);
            transform:translate3d(42.00px,141px,0.00px) rotate(0.00deg) rotateZ(270.00deg);
}

#breast {
    -webkit-transform:translate3d(114.00px,158px,0.00px);
       -moz-transform:translate3d(114.00px,158px,0.00px);
         -o-transform:translate3d(114.00px,158px,0.00px);
        -ms-transform:translate3d(114.00px,158px,0.00px);
            transform:translate3d(114.00px,158px,0.00px);
    width:145.0px;
    height:80.0px;
}

#breast .face-front {
    -webkit-transform:translate3d(8.00px,36.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(10.00deg, 0.00deg);
       -moz-transform:translate3d(8.00px,36.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(10.00deg, 0.00deg);
         -o-transform:translate3d(8.00px,36.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(10.00deg, 0.00deg);
        -ms-transform:translate3d(8.00px,36.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(10.00deg, 0.00deg);
            transform:translate3d(8.00px,36.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(10.00deg, 0.00deg);
    width:145.0px;
    height:88.0px;
}

#breast .face-front2 {
    -webkit-transform:translate3d(-8.00px,36.00px,0px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 1.00) skew(-10.00deg, 0.00deg);
       -moz-transform:translate3d(-8.00px,36.00px,0px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 1.00) skew(-10.00deg, 0.00deg);
         -o-transform:translate3d(-8.00px,36.00px,0px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 1.00) skew(-10.00deg, 0.00deg);
        -ms-transform:translate3d(-8.00px,36.00px,0px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 1.00) skew(-10.00deg, 0.00deg);
            transform:translate3d(-8.00px,36.00px,0px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 1.00) skew(-10.00deg, 0.00deg);
    width:145.0px;
    height:88.0px;
}

#breast .back {
    -webkit-transform:translate3d(8.00px,-44.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(10.00deg, 0.00deg);
       -moz-transform:translate3d(8.00px,-44.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(10.00deg, 0.00deg);
         -o-transform:translate3d(8.00px,-44.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(10.00deg, 0.00deg);
        -ms-transform:translate3d(8.00px,-44.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(10.00deg, 0.00deg);
            transform:translate3d(8.00px,-44.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(10.00deg, 0.00deg);
    width:145.0px;
    height:88px;
}

#breast .back2 {
    -webkit-transform:translate3d(-8.00px,-44.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(-10.00deg, 0.00deg);
       -moz-transform:translate3d(-8.00px,-44.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(-10.00deg, 0.00deg);
         -o-transform:translate3d(-8.00px,-44.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(-10.00deg, 0.00deg);
        -ms-transform:translate3d(-8.00px,-44.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(-10.00deg, 0.00deg);
            transform:translate3d(-8.00px,-44.00px,0px) rotate(0.00deg) rotateX(90.00deg) skew(-10.00deg, 0.00deg);
    width:145.0px;
    height:88px;
}

#breast .left {
    -webkit-transform:translate3d(108.00px,0.00px,0px) rotate(0.00deg) rotateX(180.00deg) rotateY(80.00deg) rotateZ(180.00deg) scale3d(1.00, 1.00, 1.00);
       -moz-transform:translate3d(108.00px,0.00px,0px) rotate(0.00deg) rotateX(180.00deg) rotateY(80.00deg) rotateZ(180.00deg) scale3d(1.00, 1.00, 1.00);
         -o-transform:translate3d(108.00px,0.00px,0px) rotate(0.00deg) rotateX(180.00deg) rotateY(80.00deg) rotateZ(180.00deg) scale3d(1.00, 1.00, 1.00);
        -ms-transform:translate3d(108.00px,0.00px,0px) rotate(0.00deg) rotateX(180.00deg) rotateY(80.00deg) rotateZ(180.00deg) scale3d(1.00, 1.00, 1.00);
            transform:translate3d(108.00px,0.00px,0px) rotate(0.00deg) rotateX(180.00deg) rotateY(80.00deg) rotateZ(180.00deg) scale3d(1.00, 1.00, 1.00);
    width:90.0px;
    height:80.0px;
}

#breast .right {
    -webkit-transform:translate3d(-53.00px,0.50px,0px) rotate(0.00deg) rotateX(180.00deg) rotateY(-80.00deg) rotateZ(180.00deg) scale3d(0.99, 1.00, 1.00);
       -moz-transform:translate3d(-53.00px,0.50px,0px) rotate(0.00deg) rotateX(180.00deg) rotateY(-80.00deg) rotateZ(180.00deg) scale3d(0.99, 1.00, 1.00);
         -o-transform:translate3d(-53.00px,0.50px,0px) rotate(0.00deg) rotateX(180.00deg) rotateY(-80.00deg) rotateZ(180.00deg) scale3d(0.99, 1.00, 1.00);
        -ms-transform:translate3d(-53.00px,0.50px,0px) rotate(0.00deg) rotateX(180.00deg) rotateY(-80.00deg) rotateZ(180.00deg) scale3d(0.99, 1.00, 1.00);
            transform:translate3d(-53.00px,0.50px,0px) rotate(0.00deg) rotateX(180.00deg) rotateY(-80.00deg) rotateZ(180.00deg) scale3d(0.99, 1.00, 1.00);
    width:90.0px;
    height:80.0px;
}

#breast .ceil {
    -webkit-transform:translate3d(-16.00px,0.00px,44px) rotate(0.00deg);
       -moz-transform:translate3d(-16.00px,0.00px,44px) rotate(0.00deg);
         -o-transform:translate3d(-16.00px,0.00px,44px) rotate(0.00deg);
        -ms-transform:translate3d(-16.00px,0.00px,44px) rotate(0.00deg);
            transform:translate3d(-16.00px,0.00px,44px) rotate(0.00deg);
    width:177.0px;
    height:80.0px;
}

#trunk {
    -webkit-transform:translate3d(127.00px,184.00px,-62.00px) scale3d(1.00, 1.00, 5);
       -moz-transform:translate3d(127.00px,184.00px,-62.00px) scale3d(1.00, 1.00, 5);
         -o-transform:translate3d(127.00px,184.00px,-62.00px) scale3d(1.00, 1.00, 5);
        -ms-transform:translate3d(127.00px,184.00px,-62.00px) scale3d(1.00, 1.00, 5);
            transform:translate3d(127.00px,184.00px,-62.00px) scale3d(1.00, 1.00, 5);
}

#trunk .front {
    -webkit-transform:translate3d(0.00px,29px,10px) rotate(0.00deg) rotateX(90.00deg);
       -moz-transform:translate3d(0.00px,29px,10px) rotate(0.00deg) rotateX(90.00deg);
         -o-transform:translate3d(0.00px,29px,10px) rotate(0.00deg) rotateX(90.00deg);
        -ms-transform:translate3d(0.00px,29px,10px) rotate(0.00deg) rotateX(90.00deg);
            transform:translate3d(0.00px,29px,10px) rotate(0.00deg) rotateX(90.00deg);
    width:119.0px;
    height:20.0px;
}

#trunk .back {
    -webkit-transform:translate3d(0.00px,-10px,10.00px) rotate(0.00deg) rotateX(90.00deg);
       -moz-transform:translate3d(0.00px,-10px,10.00px) rotate(0.00deg) rotateX(90.00deg);
         -o-transform:translate3d(0.00px,-10px,10.00px) rotate(0.00deg) rotateX(90.00deg);
        -ms-transform:translate3d(0.00px,-10p.........完整代码请登录后点击上方下载按钮下载查看