css实现三维立方体幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:css实现三维立方体幻灯片切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .title { text-align: center; color: #333; font: 24px Helvetica, Arial, serif; } .creds { text-align: center; color: #666; font: 12px Helvetica, Arial, serif; } .creds a { color: #000; text-decoration: none; border-bottom: 1px dotted #000; } .three-d-container{ margin:30px auto; width:300px; height:300px; border-radius: 3px; position:relative; -webkit-perspective:1000px; -moz-perspective:1000px; -ms-perspective:1000px; -o-perspective:1000px; perspective:1000px; -webkit-box-shadow:0 20px 60px rgba(0,0,0,0.2), 0 0 40px rgba(0,0,0,0.2) inset; -moz-box-shadow:0 20px 60px rgba(0,0,0,0.2), 0 0 40px rgba(0,0,0,0.2) inset; box-shadow:0 20px 60px rgba(0,0,0,0.2), 0 0 40px rgba(0,0,0,0.2) inset; } .three-d-cube{ width:100%; height:100%; position:absolute; -webkit-transition:-webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:translateZ( -150px ); -moz-transform:translateZ( -150px ); -ms-transform:translateZ( -150px ); -o-transform:translateZ( -150px ); transform:translateZ( -150px ); } .three-d-cube .three-d-item{ width:100%; height:100%; display:block; margin:0; position:absolute; } .three-d-cube .three-d-item img{ width:100%; height:100%; display:block; margin:0; } .three-d-item:nth-child(1){ -webkit-transform:rotateY( 0deg ) translateZ( 150px ); -moz-transform:rotateY( 0deg ) translateZ( 150px ); -ms-transform:rotateY( 0deg ) translateZ( 150px ); -o-transform:rotateY( 0deg ) translateZ( 150px ); transform:rotateY( 0deg ) translateZ( 150px ); } .three-d-item:nth-child(2){ -webkit-transform:rotateX( 180deg ) translateZ( 150px ); -moz-transform:rotateX( 180deg ) translateZ( 150px ); -ms-transform:rotateX( 180deg ) translateZ( 150px ); -o-transform:rotateX( 180deg ) translateZ( 150px ); transform:rotateX( 180deg ) translateZ( 150px ); } .three-d-item:nth-child(3){ -webkit-transform:rotateY( 90deg ) translateZ( 150px ); -moz-transform:rotateY( 90deg ) translateZ( 150px ); -ms-transform:rotateY( 90deg ) translateZ( 150px ); -o-transform:rotateY( 90deg ) translateZ( 150px ); transform:rotateY( 90deg ) translateZ( 150px ); } .three-d-item:nth-child(4){ -webkit-transform:rotateY( -90deg ) translateZ( 150px ); -moz-transform:rotateY( -90deg ) translateZ( 150px ); -ms-transform:rotateY( -90deg ) translateZ( 150px ); -o-transform:rotateY( -90deg ) translateZ( 150px ); transform:rotateY( -90deg ) translateZ( 150px ); } .three-d-item:nth-child(5){ -webkit-transform:rotateX( 90deg ) translateZ( 150px ); -moz-transform:rotateX( 90deg ) translateZ( 150px ); -ms-transform:rotateX( 90deg ) translateZ( 150px ); -o-transform:rotateX( 90deg ) translateZ( 150px ); transform:rotateX( 90deg ) translateZ( 150px ); } .three-d-item:nth-child(6){ -webkit-transform:rotateX( -90deg ) translateZ( 150px ); -moz-transform:rotateX( -90deg ) translateZ( 150px ); -ms-transform:rotateX( -90deg ) translateZ( 150px ); -o-transform:rotateX( -90deg ) translateZ( 150px ); transform:rotateX( -90deg ) translateZ( 150px ); } .a:checked ~ .three-d-cube{ -webkit-transform:translateZ( -150px ) rotateY( 0deg ); -moz-transform:translateZ( -150px ) rotateY( 0deg ); -ms-transform:translateZ( -150px ) rotateY( 0deg ); -o-transform:translateZ( -150px ) rotateY( 0deg ); transform:translateZ( -150px ) rotateY( 0deg ); } .b:checked ~ .three-d-cube{ -webkit-transform:translateZ( -150px ).........完整代码请登录后点击上方下载按钮下载查看
网友评论0