公司业务需求，3D旋转的导航条。
3D 真是不简单啊，1个旋转花了1天零零散散
Rec 0001.gif
<div class="middle-nav-box">
<div class="ui_base u_p3d">
<div class="base u_p3d">
<div
v-for="(item, index) in list"
:key="index"
class="ball_base u_p3d"
:class=" `nav_${index+1}`"
>
<div class="ball">
<a
class="nav-item"
:class="`nav-item-${index+1}`"
@click="navRouter(item)"
>
<li class="nav-item-li">
<img class="nav-item-li-img" :src="getImage(item.icon)" :alt="item.text">
<div class="nav-info">
<p class="nav-text">{{ item.text }}</p>
<span class="nav-sub-text">{{ item.english }}</span>
</div>
</li>
</a>
</div>
</div>
</div>
</div>
</div>
.middle-nav-box {
width: 1800px;
height: 800px;
margin: 40px auto 0px;
cursor: pointer;
z-index: 888;
padding: 0 0 0 400px;
&:hover{
animation-play-state: paused;
cursor: pointer;
.base{
animation-play-state: paused;
cursor: pointer;
}
.ball{
animation-play-state: paused;
cursor: pointer;
}
}
}
.u_p3d {
transform-style: preserve-3d;
}
.middle-nav-box .ui_base {
position: relative;
/* top: 90px;
left: 280px; */
width: 900px;
height: 900px;
perspective: 2000px;
perspective-origin: 50% 30%;
&:hover{
.base{
animation-play-state: paused;
cursor: pointer;
.ball{
animation-play-state: paused;
}
}
}
}
.middle-nav-box .ball_c {
transform-origin: 50% 50%;
position: absolute;
width: 225px;
height: 157px;
line-height: 157px;
text-align: center;
/* background: url(./zfzs.png) no-repeat; */
left: 90px;
top: 100px;
}
.middle-nav-box .ball_c img {
width: 125px;
height: 125px;
border-radius: 10px;
}
.nav-item{
display: flex;
background: url(~@/assets/zsqm/icon-bg.png) no-repeat;
background-size: contain;
background-position: center;
position: absolute;
width: 280px;
height: 150px;
align-items: center;
cursor: pointer;
.nav-item-li{
display: flex;
align-items: center;
}
img{
width: 50px;
height: 50px;
margin-left: 35px;
margin-right: 16px;
}
.nav-info{
padding-left:20px;
color: #19b1fb;
.nav-text{
font-size: 30px;
line-height: 1.5;
}
.nav-sub-text{
font-family: DIN-Regular;
font-size: 18px;
}
}
}
.middle-nav-box .base {
transform: rotateX(70deg) rotateY(15deg);
position: relative;
width: 350px;
height: 350px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: 160px;
left: 290px;
&:hover{
.ball_base{
animation-play-state: paused;
cursor: pointer;
}
}
}
.ball_base{
&:hover{
.ball{
animation-play-state: paused;
cursor: pointer;
}
}
}
.ball{
&:hover{
animation-play-state: paused;
cursor: pointer;
}
}
.middle-nav-box .ball_base {
transform-origin: 225px 0px;
position: absolute;
top: 175px;
left: -50px;
width: 225px;
height: 127px
}
.middle-nav-box .nav_1 {
transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
}
.middle-nav-box .nav_2 {
transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
}
.middle-nav-box .nav_3 {
transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
}
.middle-nav-box .nav_4 {
transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
}
.middle-nav-box .nav_5 {
transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
}
.middle-nav-box .nav_6 {
transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
}
.middle-nav-box .nav_1 .ball {
transform: rotateY(10deg) rotateZ(0deg);
}
.middle-nav-box .nav_2 .ball {
transform: rotateY(-50deg) rotateZ(0deg);
}
.middle-nav-box .nav_3 .ball {
transform: rotateY(-110deg) rotateZ(0deg);
}
.middle-nav-box .nav_4 .ball {
transform: rotateY(-170deg) rotateZ(0deg);
}
.middle-nav-box .nav_5 .ball {
transform: rotateY(-230deg) rotateZ(0deg);
}
.middle-nav-box .nav_6 .ball {
transform: rotateY(-290deg) rotateZ(0deg);
}
.middle-nav-box .ball {
transition: all 2s ease-out 0ms;
transform-origin: 50% 50%;
position: absolute;
width: 280px;
height: 150px;
left: -550px;
top: -30px;
overflow: hidden;
cursor: pointer;
}
// .middle-nav-box .ball img {
// width: 110px;
// height: 110px;
// }
.middle-nav-box .nav_1 .ball {
transition-delay: 1100ms;
}
.middle-nav-box .nav_2 .ball {
transition-delay: 900ms;
}
.middle-nav-box .nav_3 .ball {
transition-delay: 700ms;
}
.middle-nav-box .nav_4 .ball {
transition-delay: 500ms;
}
.middle-nav-box .nav_5 .ball {
transition-delay: 300ms;
}
.middle-nav-box .nav_6 .ball {
transition-delay: 100ms;
}
.middle-nav-box .nav_1 .ball {
animation: cir1 28s linear 0s infinite
}
.middle-nav-box .nav_2 .ball {
animation: cir2 28s linear 0s infinite
}
.middle-nav-box .nav_3 .ball {
animation: cir3 28s linear 0s infinite
}
.middle-nav-box .nav_4 .ball {
animation: cir4 28s linear 0s infinite
}
.middle-nav-box .nav_5 .ball {
animation: cir5 28s linear 0s infinite
}
.middle-nav-box .nav_6 .ball {
animation: cir6 28s linear 0s infinite
}
.middle-nav-box .base {
animation: cir 28s linear 0s infinite
}
@keyframes cir1 {
0% {
transform: rotateY(0deg) rotateZ(0deg)
}
100% {
transform: rotateY(-360deg) rotateZ(0deg)
}
}
@keyframes cir2 {
0% {
transform: rotateY(-60deg) rotateZ(0deg)
}
100% {
transform: rotateY(-420deg) rotateZ(0deg)
}
}
@keyframes cir3 {
0% {
transform: rotateY(-120deg) rotateZ(0deg)
}
100% {
transform: rotateY(-480deg) rotateZ(0deg)
}
}
@keyframes cir4 {
0% {
transform: rotateY(-180deg) rotateZ(0deg)
}
100% {
transform: rotateY(-540deg) rotateZ(0deg)
}
}
@keyframes cir5 {
0% {
transform: rotateY(-240deg) rotateZ(0deg)
}
100% {
transform: rotateY(-600deg) rotateZ(0deg)
}
}
@keyframes cir6 {
0% {
transform: rotateY(-300deg) rotateZ(0deg)
}
100% {
transform: rotateY(-660deg) rotateZ(0deg)
}
}
@keyframes cir {
0% {
transform: rotateX(70deg) rotateY(15deg) rotateZ(0deg)
}
100% {
transform: rotateX(70deg) rotateY(15deg) rotateZ(-360deg)
}
}
image.png
transform 中有3个属性 torateX() rotateY() rotateZ() 对应上图 想象下 3个轴的方向旋转
