<div class="container">

    <a href="#" class="card">
        <div class="touch touch__1"></div>
        <div class="touch touch__2"></div>
        <div class="touch touch__3"></div>
        <div class="touch touch__4"></div>
        <div class="touch touch__6"></div>
        <div class="touch touch__7"></div>
        <div class="touch touch__8"></div>
        <div class="touch touch__9"></div>
        <div class="main">
            <div class="icon">
                <img class="img" src="https://yuta-yamada.com/wp-content/uploads/2023/04/pass_picture.png" alt="">
            </div>
            <span class="name">Yuta - UI/UX Designer</span>
            <span class="account">1 Follow / 199,999 Followers</span>
            <span class="link text">@yamalab_design</span>
            <span class="comment text">I love 
Yakiniku!</span>
        </div>
    </a>

    <div class="circle circle_1"></div>
    <div class="circle circle_2"></div>
    <div class="circle circle_3"></div>
    <div class="circle circle_4"></div>
    <div class="circle circle_5"></div>
    <div class="circle circle_6"></div>
    <div class="circle circle_7"></div>
    <div class="circle circle_8"></div>

</div>

.card{
    position : relative ;
    z-index : 2 ;
    display : flex ;
    flex-direction : column ;
    align-items : center ;
    justify-content : flex-end ;
    width : 280px ;
    height : 420px ;
    box-sizing : border-box ;
    text-decoration : none ;
    perspective : 700px ;
}
.main{
    display : flex ;
    flex-direction : column ;
    align-items : center ;
    width : 100% ;
    height : 100% ;
    padding : 32px ;
    box-sizing : border-box ;
    border-radius : 24px ;
    backdrop-filter : blur(6px) ;
    border : solid 2px rgba(255,255,255,.3) ;
    background : linear-gradient( 135deg , rgba(255,255,255,.4) 8% , rgba(255,255,255,.1) 60% , rgba(255,255,255,.2) 92% ) ;
    transition : all ease .7s ;
    color : #fff ;
    box-shadow : 2px 2px 3px rgba(255,255,255,.2) inset ;
}
.touch{
    position : absolute  ;
    z-index : 2 ;
    width : 33.3333% ;
    height : 33.3333% ;
    box-sizing : border-box ;
}
.touch__1{
    top : 0 ;
    left : 0 ;
}
.touch__2{
    top : 0 ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
}
.touch__3{
    top : 0 ;
    right : 0 ;
}
.touch__4{
    top : 33.3333% ;
    left : 0 ;
}
.touch__6{
    top : 33.3333% ;
    right : 0 ;
}
.touch__7{
    bottom : 0 ;
    left : 0 ;
}
.touch__8{
    bottom : 0 ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
}
.touch__9{
    bottom : 0 ;
    right : 0 ;
}
.icon{
    position : relative ;
    z-index : 10 ;
    width : 140px ;
    height : 140px ;
    border-radius : 50% ;
    background : #fff ;
    overflow : hidden ;
    transition : all ease 1s ;
}
.img{
    width : 100% ;
}
.name{
    position : relative ;
    z-index : 1 ;
    font-size : 14px ;
    margin : 16px 0 8px ;
}
.account{
    position : relative ;
    z-index : 1 ;
    display : block ;
    font-size : 10px ;
    text-decoration : none ;
    color : #ddd ;
    margin : 0 0 32px 0 ;
}
.text{
    position : relative ;
    width : 100% ;
    margin : 0 ;
    box-sizing : border-box ;
    border-radius : 8px ;
    transition : all ease 1s ;
}
.link{
    z-index : 4 ;
    display : flex ;
    justify-content : center ; 
    align-items : center ;
    padding : 8px 16px ;
    color : #fff ;
    background : linear-gradient( 90deg , #2ad2ff , #00e998 ) ;
}
.comment{
    z-index : 3 ;
    padding : 12px;
    font-size : 12px ;
    line-height : 1.4 ;
    color : #444 ;
    background : #FFF ;
}
.link:not(:last-child){
    margin-bottom : 16px ;
}
.touch__1:hover ~ .main{
    transform : rotateX(20deg) rotateY(-20deg) rotateZ(10deg);
}
.touch__1:hover ~ .main .icon{
    transform : translateX(-20px) translateY(-10px) translateZ(60px);
    box-shadow : 20px 20px 24px rgba(0,0,0,.2) ;
}
.touch__2:hover ~ .main{
    transform : rotateX(20deg) rotateY(0) rotateZ(0);
}
.touch__2:hover ~ .main .icon{
    transform : translateX(0) translateY(-10px) translateZ(60px);
    box-shadow : 0 20px 24px rgba(0,0,0,.2) ;
}
.touch__3:hover ~ .main{
    transform : rotateX(20deg) rotateY(20deg) rotateZ(-10deg);
}
.touch__3:hover ~ .main .icon{
    transform : translateX(20px) translateY(-10px) translateZ(60px);
    box-shadow : -20px 20px 24px rgba(0,0,0,.2) ;
}
.touch__4:hover ~ .main{
    transform : rotateX(0) rotateY(-40deg) rotateZ(0);
}
.touch__6:hover ~ .main{
    transform : rotateX(0) rotateY(40deg) rotateZ(0);
}
.touch__7:hover ~ .main{
    transform : rotateX(-20deg) rotateY(-20deg) rotateZ(-10deg);
}
.touch__7:hover ~ .main .text{
    transform : translateX(-20px) translateY(10px) translateZ(60px);
    box-shadow : 20px -20px 24px rgba(0,0,0,.2) ;
}
.touch__8:hover ~ .main{
    transform : rotateX(-20deg) rotateY(0) rotateZ(0);
}
.touch__8:hover ~ .main .text{
    transform : translateX(0) translateY(10px) translateZ(60px);
    box-shadow : 0 -20px 24px rgba(0,0,0,.2) ;
}
.touch__9:hover ~ .main{
    transform : rotateX(-20deg) rotateY(20deg) rotateZ(10deg);
}
.touch__9:hover ~ .main .text{
    transform : translateX(20px) translateY(10px) translateZ(60px);
    box-shadow : -20px -20px 24px rgba(0,0,0,.2) ;
}







/* Doesn't relate with main */
.container{
    position : relative ;
    width : 600px ;
    height : 600px ;
    display : flex ;
    flex-direction : column ;
    justify-content : center ;
    align-items : center ;
    background-color : hsla(205,100%,13%,1) ;
    background-image:
    radial-gradient(at 49% 49%, hsla(191,77%,26%,1) 0px, transparent 50%),
    radial-gradient(at 99% 44%, hsla(208,62%,38%,1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsla(208,39%,40%,1) 0px, transparent 50%),
    radial-gradient(at 62% 100%, hsla(192,71%,38%,1) 0px, transparent 50%),
    radial-gradient(at 1% 100%, hsla(196,77%,18%,1) 0px, transparent 50%),
    radial-gradient(at 7% 69%, hsla(200,45%,39%,1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(191,52%,49%,1) 0px, transparent 50%);
    font-family : sans-serif ;
}
.circle{
    position : absolute ;
    z-index : 1 ;
    aspect-ratio : 1 / 1 ;
    box-sizing : border-box ;
    border-radius : 16px ;
    animation : rotate ease infinite ;
}
.circle_1{
    top : 60px ;
    left : 100px ;
    width : 120px ;
    background : #0097c8 ;
    animation-duration : 20s ;
    animation-direction : alternate ;
}
.circle_2{
    top : 40px ;
    right : 120px ;
    width : 80px ;
    border : solid 4px rgba(255,255,255,.3) ;
    animation-duration : 25s ;
    animation-direction : alternate-reverse ;
}
.circle_3{
    top : 240px ;
    left : 200px ;
    width : 60px ;
    border : solid 4px rgba(255,255,255,.3) ;
    animation-duration : 21s ;
    animation-direction : alternate-reverse ;
}
.circle_4{
    top : 220px ;
    right : 20px ;
    width : 100px ;
    border : solid 4px #0097c8 ;
    animation-duration : 22s ;
    animation-direction : alternate ;
}
.circle_5{
    bottom : 170px ;
    left : 50px ;
    width : 80px ;
    background : rgba(255,255,255,.3);
    animation-duration : 18s ;
    animation-direction : alternate ;
}
.circle_6{
    bottom : 70px ;
    right : 140px ;
    width : 70px ;
    background : rgba(255,255,255,.3) ;
    animation-duration : 26s ;
    animation-direction : alternate-reverse ;
}
.circle_7{
    bottom : 60px ;
    left : 240px ;
    width : 50px ;
    border : solid 4px #0097c8 ;
    animation-duration : 24s ;
    animation-direction : alternate ;
}
.circle_8{
    top : 340px ;
    right : 200px ;
    width : 50px ;
    background : #0097c8 ;
    animation-duration : 25s ;
    animation-direction : alternate-reverse ;
}
@keyframes rotate{
    0%  { transform : rotate(0) ;}
    100%{ transform : rotate(360deg) ;}
}