div+css布局实现三维傀儡人动画效果代码
代码语言: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,-10px,10.00px) rotate(0.00deg) rotateX(90.00deg); transform:translate3d(0.00px,-10px,10.00px) rotate(0.00deg) rotateX(90.00deg); width:119.0px; height:20.0px; } #trunk .right { -webkit-transform:translate3d(-20px,9px,10.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); -moz-transform:translate3d(-20px,9px,10.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); -o-transform:translate3d(-20px,9px,10.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); -ms-transform:translate3d(-20px,9px,10.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); transform:translate3d(-20px,9px,10.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); width:40.0px; height:20.0px; } #trunk .left { -webkit-transform:translate3d(99px,9.00px,10px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); -moz-transform:translate3d(99px,9.00px,10px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); -o-transform:translate3d(99px,9.00px,10px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); -ms-transform:translate3d(99px,9.00px,10px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); transform:translate3d(99px,9.00px,10px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); width:40.0px; height:20.0px; } .sholder-ring { -webkit-transform:translate3d(0px, 0px, 0px); -moz-transform:translate3d(0px, 0px, 0px); -o-transform:translate3d(0px, 0px, 0px); -ms-transform:translate3d(0px, 0px, 0px); transform:translate3d(0px, 0px, 0px); width:50px; height:50px; border-radius:25px; } #right-shoulder { -webkit-transform:translate3d(336.00px,155px,200.00px) rotate(0.00deg) rotateY(-79.00deg) scale(0.40); -moz-transform:translate3d(336.00px,155px,200.00px) rotate(0.00deg) rotateY(-79.00deg) scale(0.40); -o-transform:translate3d(336.00px,155px,200.00px) rotate(0.00deg) rotateY(-79.00deg) scale(0.40); -ms-transform:translate3d(336.00px,155px,200.00px) rotate(0.00deg) rotateY(-79.00deg) scale(0.40); transform:translate3d(336.00px,155px,200.00px) rotate(0.00deg) rotateY(-79.00deg) scale(0.40); } #left-shoulder { -webkit-transform:translate3d(43.00px,197.00px,250.00px) rotate(0.00deg) rotateY(74deg) scale(0.40); -moz-transform:translate3d(43.00px,197.00px,250.00px) rotate(0.00deg) rotateY(74deg) scale(0.40); -o-transform:translate3d(43.00px,197.00px,250.00px) rotate(0.00deg) rotateY(74deg) scale(0.40); -ms-transform:translate3d(43.00px,197.00px,250.00px) rotate(0.00deg) rotateY(74deg) scale(0.40); transform:translate3d(43.00px,197.00px,250.00px) rotate(0.00deg) rotateY(74deg) scale(0.40); } [id*="-shoulder"] .piller-face { -webkit-transform:translate3d(0.00px,0.00px,35px); -moz-transform:translate3d(0.00px,0.00px,35px); -o-transform:translate3d(0.00px,0.00px,35px); -ms-transform:translate3d(0.00px,0.00px,35px); transform:translate3d(0.00px,0.00px,35px); } [id*="-shoulder"] .tire-grip { width:70.0px; height:9.0px; } #right-elbow { -webkit-transform:translate3d(388.00px,180.00px,176px) rotate(37.00deg) rotateX(-11.00deg) rotateY(-79.00deg) rotateZ(-6.00deg) scale(0.60); -moz-transform:translate3d(388.00px,180.00px,176px) rotate(37.00deg) rotateX(-11.00deg) rotateY(-79.00deg) rotateZ(-6.00deg) scale(0.60); -o-transform:translate3d(388.00px,180.00px,176px) rotate(37.00deg) rotateX(-11.00deg) rotateY(-79.00deg) rotateZ(-6.00deg) scale(0.60); -ms-transform:translate3d(388.00px,180.00px,176px) rotate(37.00deg) rotateX(-11.00deg) rotateY(-79.00deg) rotateZ(-6.00deg) scale(0.60); transform:translate3d(388.00px,180.00px,176px) rotate(37.00deg) rotateX(-11.00deg) rotateY(-79.00deg) rotateZ(-6.00deg) scale(0.60); } #left-elbow { -webkit-transform:translate3d(58.00px,188px,185.00px) rotate(-51.00deg) rotateX(-11.00deg) rotateY(-110.00deg) rotateZ(-10.00deg) scale(0.60); -moz-transform:translate3d(58.00px,188px,185.00px) rotate(-51.00deg) rotateX(-11.00deg) rotateY(-110.00deg) rotateZ(-10.00deg) scale(0.60); -o-transform:translate3d(58.00px,188px,185.00px) rotate(-51.00deg) rotateX(-11.00deg) rotateY(-110.00deg) rotateZ(-10.00deg) scale(0.60); -ms-transform:translate3d(58.00px,188px,185.00px) rotate(-51.00deg) rotateX(-11.00deg) rotateY(-110.00deg) rotateZ(-10.00deg) scale(0.60); transform:translate3d(58.00px,188px,185.00px) rotate(-51.00deg) rotateX(-11.00deg) rotateY(-110.00deg) rotateZ(-10.00deg) scale(0.60); } .elbow-ceil { width:102.0px; height:102.0px; border-radius:50px; -webkit-transform:translate3d(25.50px,-1.60px,70.5px) scale(0.98); -moz-transform:translate3d(25.50px,-1.60px,70.5px) scale(0.98); -o-transform:translate3d(25.50px,-1.60px,70.5px) scale(0.98); -ms-transform:translate3d(25.50px,-1.60px,70.5px) scale(0.98); transform:translate3d(25.50px,-1.60px,70.5px) scale(0.98); } .elbow-ceil-right { width:102.0px; height:102.0px; border-radius:50px; background-color:#9e4726; -webkit-transform:translate3d(25.50px,-1.60px,0px) scale(0.98); -moz-transform:translate3d(25.50px,-1.60px,0px) scale(0.98); -o-transform:translate3d(25.50px,-1.60px,0px) scale(0.98); -ms-transform:translate3d(25.50px,-1.60px,0px) scale(0.98); transform:translate3d(25.50px,-1.60px,0px) scale(0.98); } [id*="-elbow"] .piller-face { -webkit-transform:translate3d(0.00px,0.00px,35px); -moz-transform:translate3d(0.00px,0.00px,35px); -o-transform:translate3d(0.00px,0.00px,35px); -ms-transform:translate3d(0.00px,0.00px,35px); transform:translate3d(0.00px,0.00px,35px); } [id*="-elbow"] .tire-grip { width:70.0px; height:9.0px; background-color:rgba(72, 72, 72, 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); } [id*="-hand"] .ceil { width:100%; height:100%; -webkit-transform:translate3d(0px,0px,0px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg) scale3d(1.00, 1.00, 1.00); -moz-transform:translate3d(0px,0px,0px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg) scale3d(1.00, 1.00, 1.00); -o-transform:translate3d(0px,0px,0px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg) scale3d(1.00, 1.00, 1.00); -ms-transform:translate3d(0px,0px,0px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg) scale3d(1.00, 1.00, 1.00); transform:translate3d(0px,0px,0px) rotate(0.00deg) rotateX(0.00deg) rotateY(0.00deg) scale3d(1.00, 1.00, 1.00); background-image:-webkit-linear-gradient(top, #808080, #808080); background-image:-moz-linear-gradient(top, #808080, #808080); background-image:-o-linear-gradient(top, #808080, #808080); background-image:-ms-linear-gradient(top, #808080, #808080); background-image:linear-gradient(to bottom, #808080, #808080); } [id*="-hand"] .top-hand { width:25.0px; height:69.0px; -webkit-transform:translate3d(46.4px,-0.1px,-10.6px) rotate(0.00deg) rotateX(0.00deg) rotateY(56deg) scale3d(1.02, 1, 1); -moz-transform:translate3d(46.4px,-0.1px,-10.6px) rotate(0.00deg) rotateX(0.00deg) rotateY(56deg) scale3d(1.02, 1, 1); -o-transform:translate3d(46.4px,-0.1px,-10.6px) rotate(0.00deg) rotateX(0.00deg) rotateY(56deg) scale3d(1.02, 1, 1); -ms-transform:translate3d(46.4px,-0.1px,-10.6px) rotate(0.00deg) rotateX(0.00deg) rotateY(56deg) scale3d(1.02, 1, 1); transform:translate3d(46.4px,-0.1px,-10.6px) rotate(0.00deg) rotateX(0.00deg) rotateY(56deg) scale3d(1.02, 1, 1); background-image:-webkit-linear-gradient(top, #a3a3a3, #a3a3a3); background-image:-moz-linear-gradient(top, #a3a3a3, #a3a3a3); background-image:-o-linear-gradient(top, #a3a3a3, #a3a3a3); background-image:-ms-linear-gradient(top, #a3a3a3, #a3a3a3); background-image:linear-gradient(to bottom, #a3a3a3, #a3a3a3); } [id*="-hand"] .top-hand2 { background-color:rgba(156, 69, 32, 1.00); width:25.0px; height:69.0px; -webkit-transform:translate3d(46.00px,0.00px,-31.1px) rotate(0.00deg) rotateX(0.00deg) rotateY(127.00deg); -moz-transform:translate3d(46.00px,0.00px,-31.1px) rotate(0.00deg) rotateX(0.00deg) rotateY(127.00deg); -o-transform:translate3d(46.00px,0.00px,-31.1px) rotate(0.00deg) rotateX(0.00deg) rotateY(127.00deg); -ms-transform:translate3d(46.00px,0.00px,-31.1px) rotate(0.00deg) rotateX(0.00deg) rotateY(127.00deg); transform:translate3d(46.00px,0.00px,-31.1px) rotate(0.00deg) rotateX(0.00deg) rotateY(127.00deg); } [id*="-hand"] .finger1 { width:25.0px; height:69.0px; -webkit-transform:translate3d(26.60px,0.00px,-37px) rotate(0.00deg) rotateX(0.00deg) rotateY(199.00deg); -moz-transform:translate3d(26.60px,0.00px,-37px) rotate(0.00deg) rotateX(0.00deg) rotateY(199.00deg); -o-transform:translate3d(26.60px,0.00px,-37px) rotate(0.00deg) rotateX(0.00deg) rotateY(199.00deg); -ms-transform:translate3d(26.60px,0.00px,-37px) rotate(0.00deg) rotateX(0.00deg) rotateY(199.00deg); transform:translate3d(26.60px,0.00px,-37px) rotate(0.00deg) rotateX(0.00deg) rotateY(199.00deg); } [id*="-hand"] .side1 { width:52.0px; height:20.0px; -webkit-transform:translate3d(7px,-10.00px,-10.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(180.00deg) skew(33deg, 0.00deg); -moz-transform:translate3d(7px,-10.00px,-10.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(180.00deg) skew(33deg, 0.00deg); -o-transform:translate3d(7px,-10.00px,-10.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(180.00deg) skew(33deg, 0.00deg); -ms-transform:translate3d(7px,-10.00px,-10.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(180.00deg) skew(33deg, 0.00deg); transform:translate3d(7px,-10.00px,-10.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(180.00deg) skew(33deg, 0.00deg); } [id*="-hand"] .side2 { width:52.0px; height:21.0px; -webkit-transform:translate3d(7.00px,58.0px,-10.80px) rotate(0.00deg) rotateX(91.00deg) rotateY(180.00deg) skew(34.00deg, 0.00deg); -moz-transform:translate3d(7.00px,58.0px,-10.80px) rotate(0.00deg) rotateX(91.00deg) rotateY(180.00deg) skew(34.00deg, 0.00deg); -o-transform:translate3d(7.00px,58.0px,-10.80px) rotate(0.00deg) rotateX(91.00deg) rotateY(180.00deg) skew(34.00deg, 0.00deg); -ms-transform:translate3d(7.00px,58.0px,-10.80px) rotate(0.00deg) rotateX(91.00deg) rotateY(180.00deg) skew(34.00deg, 0.00deg); transform:translate3d(7.00px,58.0px,-10.80px) rotate(0.00deg) rotateX(91.00deg) rotateY(180.00deg) skew(34.00deg, 0.00deg); } #thumb-left { width:30.0px; height:20.0px; -webkit-transform:translate3d(25.00px,-21.00px,-19.00px) rotate(0.00deg) rotateX(110.00deg) rotateY(0.00deg) rotateZ(-11.00deg) scale3d(1.00, 1.00, 1.00) skew(0.00deg, 0.00deg); -moz-transform:translate3d(25.00px,-21.00px,-19.00px) rotate(0.00deg) rotateX(110.00deg) rotateY(0.00deg) rotateZ(-11.00deg) scale3d(1.00, 1.00, 1.00) skew(0.00deg, 0.00deg); -o-transform:translate3d(25.00px,-21.00px,-19.00px) rotate(0.00deg) rotateX(110.00deg) rotateY(0.00deg) rotateZ(-11.00deg) scale3d(1.00, 1.00, 1.00) skew(0.00deg, 0.00deg); -ms-transform:translate3d(25.00px,-21.00px,-19.00px) rotate(0.00deg) rotateX(110.00deg) rotateY(0.00deg) rotateZ(-11.00deg) scale3d(1.00, 1.00, 1.00) skew(0.00deg, 0.00deg); transform:translate3d(25.00px,-21.00px,-19.00px) rotate(0.00deg) rotateX(110.00deg) rotateY(0.00deg) rotateZ(-11.00deg) scale3d(1.00, 1.00, 1.00) skew(0.00deg, 0.00deg); } #thumb-right { width:30.0px; height:20.0px; -webkit-transform:translate3d(17.00px,70.00px,-19.00px) rotate(0.00deg) rotateX(80deg) rotateY(180.00deg) rotateZ(0.00deg) scale3d(1.00, 1.00, 1.00) skew(0.00deg, 0.00deg); -moz-transform:translate3d(17.00px,70.00px,-19.00px) rotate(0.00deg) rotateX(80deg) rotateY(180.00deg) rotateZ(0.00deg) scale3d(1.00, 1.00, 1.00) skew(0.00deg, 0.00deg); -o-transform:translate3d(17.00px,70.00px,-19.00px) rotate(0.00deg) rotateX(80deg) rotateY(180.00deg) rotateZ(0.00deg) scale3d(1.00, 1.00, 1.00) skew(0.00deg, 0.00deg); -ms-transform:translate3d(17.00px,70.00px,-19.00px) rotate(0.00deg) rotateX(80deg) rotateY(180.00deg) rotateZ(0.00deg) scale3d(1.00, 1.00, 1.00) skew(0.00deg, 0.00deg); transform:translate3d(17.00px,70.00px,-19.00px) rotate(0.00deg) rotateX(80deg) rotateY(180.00deg) rotateZ(0.00deg) scale3d(1.00, 1.00, 1.00) skew(0.00deg, 0.00deg); } .thumb-top { width:23.0px; height:11.0px; -webkit-transform:translate3d(-5.70px,6.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(45.00deg, 0.00deg); -moz-transform:translate3d(-5.70px,6.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(45.00deg, 0.00deg); -o-transform:translate3d(-5.70px,6.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(45.00deg, 0.00deg); -ms-transform:translate3d(-5.70px,6.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(45.00deg, 0.00deg); transform:translate3d(-5.70px,6.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(45.00deg, 0.00deg); background-image:-webkit-linear-gradient(top, #808080, #808080); background-image:-moz-linear-gradient(top, #808080, #808080); background-image:-o-linear-gradient(top, #808080, #808080); background-image:-ms-linear-gradient(top, #808080, #808080); background-image:linear-gradient(to bottom, #808080, #808080); } .thumb-top2 { width:23.0px; height:11.0px; -webkit-transform:translate3d(6.40px,6.5px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(-45.00deg, 0.00deg); -moz-transform:translate3d(6.40px,6.5px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(-45.00deg, 0.00deg); -o-transform:translate3d(6.40px,6.5px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(-45.00deg, 0.00deg); -ms-transform:translate3d(6.40px,6.5px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(-45.00deg, 0.00deg); transform:translate3d(6.40px,6.5px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(-45.00deg, 0.00deg); background-image:-webkit-linear-gradient(top, #808080, #808080); background-image:-moz-linear-gradient(top, #808080, #808080); background-image:-o-linear-gradient(top, #808080, #808080); background-image:-ms-linear-gradient(top, #808080, #808080); background-image:linear-gradient(to bottom, #808080, #808080); } .thumb-bottom { width:24.0px; height:11px; -webkit-transform:translate3d(-5.70px,-5.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(0.99, 1, 0.00) skew(45.00deg, 0.00deg); -moz-transform:translate3d(-5.70px,-5.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(0.99, 1, 0.00) skew(45.00deg, 0.00deg); -o-transform:translate3d(-5.70px,-5.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(0.99, 1, 0.00) skew(45.00deg, 0.00deg); -ms-transform:translate3d(-5.70px,-5.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(0.99, 1, 0.00) skew(45.00deg, 0.00deg); transform:translate3d(-5.70px,-5.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(0.99, 1, 0.00) skew(45.00deg, 0.00deg); } .thumb-bottom2 { width:23.0px; height:11.0px; -webkit-transform:translate3d(6.40px,-5.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(-45.00deg, 0.00deg); -moz-transform:translate3d(6.40px,-5.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(-45.00deg, 0.00deg); -o-transform:translate3d(6.40px,-5.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(-45.00deg, 0.00deg); -ms-transform:translate3d(6.40px,-5.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(-45.00deg, 0.00deg); transform:translate3d(6.40px,-5.50px,-5.50px) rotate(0.00deg) rotateX(90.00deg) scale3d(1.00, 1.00, 0.00) skew(-45.00deg, 0.00deg); } .thumb-face1 { width:24.0px; height:12.0px; -webkit-transform:translate3d(-0.30px,0.00px,0.00px) rotate(0.00deg) scale3d(1.04, 1.00, 1.00) skew(0.00deg, 0.00deg); -moz-transform:translate3d(-0.30px,0.00px,0.00px) rotate(0.00deg) scale3d(1.04, 1.00, 1.00) skew(0.00deg, 0.00deg); -o-transform:translate3d(-0.30px,0.00px,0.00px) rotate(0.00deg) scale3d(1.04, 1.00, 1.00) skew(0.00deg, 0.00deg); -ms-transform:translate3d(-0.30px,0.00px,0.00px) rotate(0.00deg) scale3d(1.04, 1.00, 1.00) skew(0.00deg, 0.00deg); transform:translate3d(-0.30px,0.00px,0.00px) rotate(0.00deg) scale3d(1.04, 1.00, 1.00) skew(0.00deg, 0.00deg); background-color:#ebebeb; background-image:-webkit-linear-gradient(top, #494949, #494949); background-image:-moz-linear-gradient(top, #494949, #494949); background-image:-o-linear-gradient(top, #494949, #494949); background-image:-ms-linear-gradient(top, #494949, #494949); background-image:linear-gradient(to bottom, #494949, #494949); } .thumb-face2 { width:16.0px; height:12.0px; -webkit-transform:translate3d(21.4px,0.00px,-5.50px) rotate(0.00deg) rotateY(45.00deg) scale3d(0.97, 1, 1) skew(0.00deg, 0.00deg); -moz-transform:translate3d(21.4px,0.00px,-5.50px) rotate(0.00deg) rotateY(45.00deg) scale3d(0.97, 1, 1) skew(0.00deg, 0.00deg); -o-transform:translate3d(21.4px,0.00px,-5.50px) rotate(0.00deg) rotateY(45.00deg) scale3d(0.97, 1, 1) skew(0.00deg, 0.00deg); -ms-transform:translate3d(21.4px,0.00px,-5.50px) rotate(0.00deg) rotateY(45.00deg) scale3d(0.97, 1, 1) skew(0.00deg, 0.00deg); transform:translate3d(21.4px,0.00px,-5.50px) rotate(0.00deg) rotateY(45.00deg) scale3d(0.97, 1, 1) skew(0.00deg, 0.00deg); background-image:-webkit-linear-gradient(top, #808080, #808080); background-image:-moz-linear-gradient(top, #808080, #808080); background-image:-o-linear-gradient(top, #808080, #808080); background-image:-ms-linear-gradient(top, #808080, #808080); background-image:linear-gradient(to bottom, #808080, #808080); } .thumb-face3 { width:16.0px; height:12.0px; -webkit-transform:translate3d(-13.70px,0.00px,-5.70px) rotate(0.00deg) rotateY(-45.00deg) scale3d(0.96, 1.00, 1.00) skew(0.00deg, 0.00deg); -moz-transform:translate3d(-13.70px,0.00px,-5.70px) rotate(0.00deg) rotateY(-45.00deg) scale3d(0.96, 1.00, 1.00) skew(0.00deg, 0.00deg); -o-transform:translate3d(-13.70px,0.00px,-5.70px) rotate(0.00deg) rotateY(-45.00deg) scale3d(0.96, 1.00, 1.00) skew(0.00deg, 0.00deg); -ms-transform:translate3d(-13.70px,0.00px,-5.70px) rotate(0.00deg) rotateY(-45.00deg) scale3d(0.96, 1.00, 1.00) skew(0.00deg, 0.00deg); transform:translate3d(-13.70px,0.00px,-5.70px) rotate(0.00deg) rotateY(-45.00deg) scale3d(0.96, 1.00, 1.00) skew(0.00deg, 0.00deg); background-image:-webkit-linear-gradient(top, #a3a3a3, #a3a3a3); background-image:-moz-linear-gradient(top, #a3a3a3, #a3a3a3); background-image:-o-linear-gradient(top, #a3a3a3, #a3a3a3); background-image:-ms-linear-gradient(top, #a3a3a3, #a3a3a3); background-image:linear-gradient(to bottom, #a3a3a3, #a3a3a3); } #right-hand { -webkit-transform:translate3d(369.00px,192px,216.00px) rotate(37.00deg) rotateX(4.00deg) rotateY(41deg); -moz-transform:translate3d(369.00px,192px,216.00px) rotate(37.00deg) rotateX(4.00deg) rotateY(41deg); -o-transform:translate3d(369.00px,192px,216.00px) rotate(37.00deg) rotateX(4.00deg) rotateY(41deg); -ms-transform:translate3d(369.00px,192px,216.00px) rotate(37.00deg) rotateX(4.00deg) rotateY(41deg); transform:translate3d(369.00px,192px,216.00px) rotate(37.00deg) rotateX(4.00deg) rotateY(41deg); width:52.0px; height:69.0px; } #left-hand { width:52.0px; height:69.0px; -webkit-transform:translate3d(-13.00px,255px,197px) rotate(131.00deg) rotateX(-4.00deg) rotateY(53.00deg); -moz-transform:translate3d(-13.00px,255px,197px) rotate(131.00deg) rotateX(-4.00deg) rotateY(53.00deg); -o-transform:translate3d(-13.00px,255px,197px) rotate(131.00deg) rotateX(-4.00deg) rotateY(53.00deg); -ms-transform:translate3d(-13.00px,255px,197px) rotate(131.00deg) rotateX(-4.00deg) rotateY(53.00deg); transform:translate3d(-13.00px,255px,197px) rotate(131.00deg) rotateX(-4.00deg) rotateY(53.00deg); } .finger-stroke { width:100%; height:1px; background-color:rgba(180, 180, 180, 0.31); } .top-hand .finger-stroke { width:18.0px; left:7.0px; } #waist { -webkit-transform:translate3d(112.00px,159.00px,-97px) scale(0.80); -moz-transform:translate3d(112.00px,159.00px,-97px) scale(0.80); -o-transform:translate3d(112.00px,159.00px,-97px) scale(0.80); -ms-transform:translate3d(112.00px,159.00px,-97px) scale(0.80); transform:translate3d(112.00px,159.00px,-97px) scale(0.80); } #waist .face-bottom { width:40.0px; height:80.0px; -webkit-transform:translate3d(74.00px,12px,-9.00px); -moz-transform:translate3d(74.00px,12px,-9.00px); -o-transform:translate3d(74.00px,12px,-9.00px); -ms-transform:translate3d(74.00px,12px,-9.00px); transform:translate3d(74.00px,12px,-9.00px); } #waist .face-front { width:40.0px; height:24.0px; -webkit-transform:translate3d(107.9px,80.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -moz-transform:translate3d(107.9px,80.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -o-transform:translate3d(107.9px,80.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -ms-transform:translate3d(107.9px,80.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); transform:translate3d(107.9px,80.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); } #waist .face-front2 { width:40.0px; height:24.0px; -webkit-transform:translate3d(42px,80.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(-70.00deg, 0.00deg); -moz-transform:translate3d(42px,80.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(-70.00deg, 0.00deg); -o-transform:translate3d(42px,80.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(-70.00deg, 0.00deg); -ms-transform:translate3d(42px,80.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(-70.00deg, 0.00deg); transform:translate3d(42px,80.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(-70.00deg, 0.00deg); } #waist .face-front3 { width:40.0px; height:18.0px; -webkit-transform:translate3d(68px,83.00px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(-69.00deg, 0.00deg); -moz-transform:translate3d(68px,83.00px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(-69.00deg, 0.00deg); -o-transform:translate3d(68px,83.00px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(-69.00deg, 0.00deg); -ms-transform:translate3d(68px,83.00px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(-69.00deg, 0.00deg); transform:translate3d(68px,83.00px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(-69.00deg, 0.00deg); } #waist .face-front4 { width:40.0px; height:24.0px; -webkit-transform:translate3d(74.00px,80px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(0.00deg, 0.00deg); -moz-transform:translate3d(74.00px,80px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(0.00deg, 0.00deg); -o-transform:translate3d(74.00px,80px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(0.00deg, 0.00deg); -ms-transform:translate3d(74.00px,80px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(0.00deg, 0.00deg); transform:translate3d(74.00px,80px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(0.00deg, 0.00deg); } #waist .face-front5 { width:40.0px; height:18.0px; -webkit-transform:translate3d(82.00px,83.00px,6px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -moz-transform:translate3d(82.00px,83.00px,6px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -o-transform:translate3d(82.00px,83.00px,6px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -ms-transform:translate3d(82.00px,83.00px,6px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); transform:translate3d(82.00px,83.00px,6px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); } #waist .face-back { width:40.0px; height:24.0px; -webkit-transform:translate3d(107.5px,0.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -moz-transform:translate3d(107.5px,0.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -o-transform:translate3d(107.5px,0.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -ms-transform:translate3d(107.5px,0.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); transform:translate3d(107.5px,0.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); } #waist .face-back2 { width:40.0px; height:24.0px; -webkit-transform:translate3d(42px,0.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(-70.00deg, 0.00deg); -moz-transform:translate3d(42px,0.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(-70.00deg, 0.00deg); -o-transform:translate3d(42px,0.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(-70.00deg, 0.00deg); -ms-transform:translate3d(42px,0.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(-70.00deg, 0.00deg); transform:translate3d(42px,0.00px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(-70.00deg, 0.00deg); } #waist .face-back3 { width:40.0px; height:18.0px; -webkit-transform:translate3d(68.00px,3px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(-69.00deg, 0.00deg); -moz-transform:translate3d(68.00px,3px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(-69.00deg, 0.00deg); -o-transform:translate3d(68.00px,3px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(-69.00deg, 0.00deg); -ms-transform:translate3d(68.00px,3px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(-69.00deg, 0.00deg); transform:translate3d(68.00px,3px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(-69.00deg, 0.00deg); } #waist .face-back4 { width:40.0px; height:24.0px; -webkit-transform:translate3d(74.00px,0px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(0.00deg, 0.00deg); -moz-transform:translate3d(74.00px,0px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(0.00deg, 0.00deg); -o-transform:translate3d(74.00px,0px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(0.00deg, 0.00deg); -ms-transform:translate3d(74.00px,0px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(0.00deg, 0.00deg); transform:translate3d(74.00px,0px,3.00px) rotate(0.00deg) rotateX(90.00deg) skew(0.00deg, 0.00deg); } #waist .face-back5 { width:40.0px; height:18.0px; -webkit-transform:translate3d(82.00px,3px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -moz-transform:translate3d(82.00px,3px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -o-transform:translate3d(82.00px,3px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); -ms-transform:translate3d(82.00px,3px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); transform:translate3d(82.00px,3px,6.00px) rotate(0.00deg) rotateX(90.00deg) skew(69.00deg, 0.00deg); } #waist .face-left { width:80.0px; height:70.0px; -webkit-transform:translate3d(106px,17px,3px) rotate(0.00deg) rotateX(180.00deg) rotateY(20.00deg) rotateZ(90.00deg); -moz-transform:translate3d(106px,17px,3px) rotate(0.00deg) rotateX(180.00deg) rotateY(20.00deg) rotateZ(90.00deg); -o-transform:translate3d(106px,17px,3px) rotate(0.00deg) rotateX(180.00deg) rotateY(20.00deg) rotateZ(90.00deg); -ms-transform:translate3d(106px,17px,3px) rotate(0.00deg) rotateX(180.00deg) rotateY(20.00deg) rotateZ(90.00deg); transform:translate3d(106px,17px,3px) rotate(0.00deg) rotateX(180.00deg) rotateY(20.00deg) rotateZ(90.00deg); } #waist .face-right { width:80.0px; height:70.0px; -webkit-transform:translate3d(2px,17.00px,3.00px) rotate(0.00deg) rotateX(180.00deg) rotateY(-20.00deg) rotateZ(90.00deg); -moz-transform:translate3d(2px,17.00px,3.00px) rotate(0.00deg) rotateX(180.00deg) rotateY(-20.00deg) rotateZ(90.00deg); -o-transform:translate3d(2px,17.00px,3.00px) rotate(0.00deg) rotateX(180.00deg) rotateY(-20.00deg) rotateZ(90.00deg); -ms-transform:translate3d(2px,17.00px,3.00px) rotate(0.00deg) rotateX(180.00deg) rotateY(-20.00deg) rotateZ(90.00deg); transform:translate3d(2px,17.00px,3.00px) rotate(0.00deg) rotateX(180.00deg) rotateY(-20.00deg) rotateZ(90.00deg); } #waist .face-top-front { width:170.0px; height:20.0px; -webkit-transform:translate3d(9px,82.00px,24.80px) rotate(0.00deg) rotateX(90.00deg); -moz-transform:translate3d(9px,82.00px,24.80px) rotate(0.00deg) rotateX(90.00deg); -o-transform:translate3d(9px,82.00px,24.80px) rotate(0.00deg) rotateX(90.00deg); -ms-transform:translate3d(9px,82.00px,24.80px) rotate(0.00deg) rotateX(90.00deg); transform:translate3d(9px,82.00px,24.80px) rotate(0.00deg) rotateX(90.00deg); } #waist .face-top-back { width:170.0px; height:20.0px; -webkit-transform:translate3d(9.00px,2.00px,24.9px) rotate(0.00deg) rotateX(90.00deg); -moz-transform:translate3d(9.00px,2.00px,24.9px) rotate(0.00deg) rotateX(90.00deg); -o-transform:translate3d(9.00px,2.00px,24.9px) rotate(0.00deg) rotateX(90.00deg); -ms-transform:translate3d(9.00px,2.00px,24.9px) rotate(0.00deg) rotateX(90.00deg); transform:translate3d(9.00px,2.00px,24.9px) rotate(0.00deg) rotateX(90.00deg); } #waist .face-top-left { width:80.0px; height:20.0px; -webkit-transform:translate3d(-31px,42.00px,25.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90deg); -moz-transform:translate3d(-31px,42.00px,25.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90deg); -o-transform:translate3d(-31px,42.00px,25.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90deg); -ms-transform:translate3d(-31px,42.00px,25.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90deg); transform:translate3d(-31px,42.00px,25.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90deg); } #waist .face-top-right { width:80.0px; height:20.0px; -webkit-transform:translate3d(139px,42.00px,25.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); -moz-transform:translate3d(139px,42.00px,25.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); -o-transform:translate3d(139px,42.00px,25.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); -ms-transform:translate3d(139px,42.00px,25.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); transform:translate3d(139px,42.00px,25.00px) rotate(0.00deg) rotateX(90.00deg) rotateY(90.00deg); } #waist .face-ceil { width:170.0px; height:80.0px; -webkit-transform:translate3d(9px,12px,35.00px) rotate(0.00deg); -moz-transform:translate3d(9px,12px,35.00px) rotate(0.00deg); -o-transform:translate3d(9px,12px,35.00px) rotate(0.00deg); -ms-transform:translate3d(9px,12px,35.00px) rotate(0.00deg); transform:translate3d(9px,12px,35.00px) rotate(0.00deg); } #waist [class*="face-"] { background-color:rgba(36, 36, 36, 1.00); } [id*="-thigh"] { } [id*="-thigh"] .tire-grip { width:100.0px; height:9.0px; } [id*="-thigh"] .r360-1 { } [id*="-thigh"] .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); } [id*="-thigh"] .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); } [id*="-thigh"] .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); } [id*="-thigh"] .piller-face { -webkit-transform:translate3d(-19.00px,0.00px,35.00px); -moz-transform:translate3d(-19.00px,0.00px,35.00px); -o-transform:translate3d(-19.00px,0.00px,35.00px); -ms-transform:translate3d(-19.00px,0.00px,35.00px); transform:translate3d(-19.00px,0.00px,35.00px); } #right-thigh { -webkit-transform:translate3d(115.00px,205px,80px) rotate(0.00deg) rotateX(13deg) rotateY(18.00deg) scale3d(0.40, 0.40, 0.80); -moz-transform:translate3d(115.00px,205px,80px) rotate(0.00deg) rotateX(13deg) rotateY(18.00deg) scale3d(0.40, 0.40, 0.80); -o-transform:translate3d(115.00px,205px,80px) rotate(0.00deg) rotateX(13deg) rotateY(18.00deg) scale3d(0.40, 0.40, 0.80); -ms-transform:translate3d(115.00px,205px,80px) rotate(0.00deg) rotateX(13deg) rotateY(18.00deg) scale3d(0.40, 0.40, 0.80); transform:translate3d(115.00px,205px,80px) rotate(0.00deg) rotateX(13deg) rotateY(18.00deg) scale3d(0.40, 0.40, 0.80); } #left-thigh { -webkit-transform:translate3d(225.00px,167.00px,78.00px) rotate(0.00deg) rotateX(0.00deg) rotateY(-20.00deg) scale3d(0.40, 0.40, 0.70); -moz-transform:translate3d(225.00px,167.00px,78.00px) rotate(0.00deg) rotateX(0.00deg) rotateY(-20.00deg) scale3d(0.40, 0.40, 0.70); -o-transform:translate3d(225.00px,167.00px,78.00px) rotate(0.00deg) rotateX(0.00deg) rotateY(-20.00deg) scale3d(0.40, 0.40, 0.70); -ms-transform:translate3d(225.00px,167.00px,78.00px) rotate(0.00deg) rotateX(0.00deg) rotateY(-20.00deg) scale3d(0.40, 0.40, 0.70); transform:translate3d(225.00px,167.00px,78.00px) rotate(0.00deg) rotateX(0.00deg) rotateY(-20.00deg) scale3d(0.40, 0.40, 0.70); } [id*="-knees"] { } #right-knees { -webkit-transform:translate3d(77px,192.00px,30.00px) scale(0.7); -moz-transform:translate3d(77px,192.00px,30.00px) scale(0.7); -o-transform:translate3d(77px,192.00px,30.00px) scale(0.7); -ms-transform:translate3d(77px,192.00px,30.00px) scale(0.7); transform:translate3d(77px,192.00px,30.00px) scale(0.7); } #left-knees { -webkit-transform:translate3d(200px,128.00px,30.00px) scale(0.70); -moz-transform:translate3d(200px,128.00px,30.00px) scale(0.70); -o-transform:translate3d(200px,128.00px,30.00px) scale(0.70); -ms-transform:translate3d(200px,128.00px,30.00px) scale(0.70); transform:translate3d(200px,128.00px,30.00px) scale(0.70); width:100px; height:100px; } [id*="-knees"] .piller-face { -webkit-transform:translate3d(0.00px,0.00px,35px); -moz-transform:translate3d(0.00px,0.00px,35px); -o-transform:translate3d(0.00px,0.00px,35px); -ms-transform:translate3d(0.00px,0.00px,35px); transform:translate3d(0.00px,0.00px,35px); } [id*="-knees"] .tire-grip { width:70.0px; height:9.0px; } [id*="-toe"] { width:100px; height:125px; background-color:#000000; } #right-toe { -webkit-transform:translate3d(75.00px,179.00px,0.00px) rotate(15.00deg) scale(0.8); -moz-transform:translate3d(75.00px,179.00px,0.00px) rotate(15.00deg) scale(0.8); -o-transform:translate3d(75.00px,179.00px,0.00px) rotate(15.00deg) scale(0.8); -ms-transform:translate3d(75.00px,179.00px,0.00px) rotate(15.00deg) scale(0.8); transform:translate3d(75.00px,179.00px,0.00px) rotate(15.00deg) scale(0.8); } #left-toe { -webkit-transform:translate3d(223.00px,124.00px,0.00px) rotate(-26.00deg) scale(0.8); -moz-transform:translate3d(223.00px,124.00px,0.00px) rotate(-26.00deg) scale(0.8); -o-transform:translate3d(223.00px,124.00px,0.00px) rotate(-26.00deg) scale(0.8); -ms-transform:translate3d(223.00px,124.00px,0.00px) rotate(-26.00deg) scale(0.8); transform:translate3d(223.00px,124.00px,0.00px) rotate(-26.00deg) scale(0.8); } [id*="-toe"] .face { width:100%; height:30px; background-color:#242424; } [id*="-toe"] .front { -webkit-transform:translate3d(0.00px,110px,15.00px) rotate(0.00deg) rotateX(270.00deg); -moz-transform:translate3d(0.00px,110px,15.00px) rotate(0.00deg) rotateX(270.00deg); -o-transform:translate3d(0.00px,110px,15.00px) rotate(0.00deg) rotateX(270.00deg); -ms-transform:translate3d(0.00px,110px,15.00px) rotate(0.00deg) rotateX(270.00deg); transform:translate3d(0.00px,110px,15.00px) rotate(0.00deg) rotateX(270.00deg); background-color:#6b6b6b; } [id*="-toe"] .back { -webkit-transform:translate3d(0.00px,-15px,15.00px) rotate(0.00deg) rotateX(270.00deg); -moz-transform:translate3d(0.00px,-15.........完整代码请登录后点击上方下载按钮下载查看
网友评论0