vue scss 实现3D球体照片墙

演示地址

gitee代码地址

<template>
<div>
<ul v-for="ulnum in 25" :key="ulnum" :class="'ulnum-'+ulnum">
<view v-if="ulnum <13 ">
<li v-for="linum in (25 - ulnum*2)" :key="linum" :class="'linum-'+ulnum+'-'+linum">
<img src="../assets/logo2.png" >
</li>
</view>
<view v-else>
<li v-for="linum in (ulnum*2 - 25)" :key="linum" :class="'linum-'+ulnum+'-'+linum">
<img src="../assets/logo2.png" >
</li>
</view>
</ul>
</div>
</template>

<script>
</script>

<style scoped>
@keyframes spin {
0% {
transform: rotateZ(0deg) rotateY(45deg) rotateX(0deg);
}
100% {
transform: rotateZ(360deg) rotateY(405deg) rotateX(360deg);
}
}
.showli{
padding: 0;
margin: 0;
list-style: none;
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
img{
width: 45px;
height: 45px;
border-radius: 45px;
}
.plane {
width: 100px;
height: 100px;
margin: 350px auto;
transform-style: preserve-3d;
transform-origin: 50px 50px;
-webkit-animation: spin 40s infinite linear;
animation: spin 40s infinite linear;
}
.plane ul {
padding: 0;
margin: 0;
list-style: none;
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
.plane li{
position: absolute;
border-radius: 45px;
opacity: 0.8;
display: flex;
align-items: center;
justify-content: center;
// background-color: red;
}
@for $i from 1 to 26 {
@if $i<13 {
$limax:26-$i*2;
@for $j from 1 to $limax {
.linum-#{$i}-#{$j}{transform: rotateY(#{$j*360/($limax - 1)}deg) rotateX(($i) * 7.5deg)  translateZ(387px);}
}
}@else{
$limax:$i*2 - 26;
@for $j from 1 to $limax+2 {
.linum-#{$i}-#{$j}{transform: rotateY(#{$j*360/($limax + 1)}deg) rotateX(($i - 1) * -7.5deg)  translateZ(387px);}
}
}
}
</style>