www.gusucode.com > 水平和垂直方向交叉滚动的图片展示HTML5特效源码程序 > 水平和垂直方向交叉滚动的图片展示HTML5特效/html53dmultaxisimages/html5-3d-mult-axis-images/css/style.css
body { background: #696969; font-family: 'comic sans ms', Helvetica, arial, sans-serif; } .multiSlide { width: 470px; height: 470px; position: relative; margin: 100px auto 0; overflow: hidden; -webkit-perspective: 300px; } .box { background: #fff; position: absolute; top: 10px; left: 10px; padding:5px; width: 140px; height: 140px; border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5),inset 0 -1px 2px 0 rgba(0,0,0,0.3); -webkit-transition: all 500ms cubic-bezier(0.7,-0.9,0.3,1.4); -moz-transition: all 500ms cubic-bezier(0.7,-0.9,0.3,1.4); transition: all 500ms cubic-bezier(0.7,-0.9,0.3,1.4); opacity: 1; } .box[data-pos='21']{ -webkit-transform: rotateX(30deg); -webkit-transform-origin: center bottom; opacity: 0.8; } .box[data-pos='23']{ -webkit-transform: rotateX(-30deg); -webkit-transform-origin: center top; opacity: 0.8; } .box[data-pos='12']{ -webkit-transform: rotateY(-30deg); -webkit-transform-origin: right center; opacity: 0.8; } .box[data-pos='32']{ -webkit-transform: rotateY(30deg); -webkit-transform-origin: left center; opacity: 0.8; } .box[data-pos='2-1'], .box[data-pos='20'], .box[data-pos='24'], .box[data-pos='25'], .box[data-pos='02'], .box[data-pos='42'], .box[data-pos='-12'], .box[data-pos='52']{ opacity: 0; } .box img { width: 140px; height: 140px; } .multiSlideNav { width: 470px; height: 470px; position: absolute; left: 50%; top: 100px; margin: 0 0 0 -235px; } .navButton { position: absolute; width: 30px; height: 30px; background: #444; border-radius: 100%; left: 50%; top: 50%; text-decoration: none; line-height: 27px; text-align: center; color: #888; font-size: 22px; font-weight: bold; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .navButton:hover { background: #5f5f5f; } .navButton#top { -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -transform: rotateZ(90deg); margin: -215px 0 0 -15px; } .navButton#bottom { -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -transform: rotateZ(90deg); margin: 185px 0 0 -15px; } .navButton#left { margin: -15px 0 0 -215px; } .navButton#right { margin: -15px 0 0 185px; }