div+css实现三维图片轮盘旋转动画效果代码-html代码-BFW代码库

div+css实现三维图片轮盘旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现三维图片轮盘旋转动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
    position: relative;
    background: #333;
    min-height: 100vh;
    color: #fff;
}

.cont {
    position: absolute;
    top: 50%;
    left: 50%;  
    transform: translate(-50%, -50%);
    width: 520px;
    perspective: 750px;
}

 .cont *:not(:empty) {
   transform-style: preserve-3d;
}


.Face:nth-child(1) { --startAngle: 0deg; background: url('//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_150,/quality,q_90'); }
.Face:nth-child(2) { --startAngle: 45deg; background: url('//repo.bfw.wiki/bfwrepo/image/63e455adbc716.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_150,/quality,q_90'); }
.Face:nth-child(3) { --startAngle: 90deg; background: url('//repo.bfw.wiki/bfwrepo/image/63e9d20cc005e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_150,/quality,q_90'); }
.Face:nth-child(4) { --startAngle: 135deg; background: url('//repo.bfw.wiki/bfwrepo/image/63f6d349d5758.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_150,/quality,q_90'); }
.Face:nth-child(5) { --startAngle: 180deg; background: url('//repo.bfw.wiki/bfwrepo/image/640016b2491eb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_150,/quality,q_90'); }
.Face:nth-child(6) { --startAngle: 225deg; background: url('//repo.bfw.wiki/bfwrepo/image/6406799168031.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_150,/quality,q_90'); }
.Face:nth-child(7) { --startAngle: 270deg; background: url('//repo.bfw.wiki/bfwrepo/image/6409887ae98c4.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_150,/quality,q_90'); }
.Face:nth-child(8) { --startAngle: 315deg; background: url('//repo.bfw.wiki/bfwrepo/image/640bb6d171f4f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_150,/quality,q_90'); }

.l .Face { --left: 153px; --speed: 5s; background-position: -300px 0; border-color: #500; }
.m .Face { --left: 0px; --speed: 7s; background-position: -150px 0; border-color: #050; }
.r.........完整代码请登录后点击上方下载按钮下载查看