[Tistory] 프로필 사진의 앞, 뒷면을 만들어보자

 

 

그동안 티스토리 스킨 어떤 효과를 적용해볼까 하다가 문득 다른 블로그를 보다보니

 

카드플립형으로 프로필 사진에 효과를 주면 어떨까 생각해봤다.

 

사소하지만 사실 별로 생각지 못한 기발한 방법이다. 웹 이미지의 앞뒷면이라..

 

 

잠깐 고민을 해보니 CSS 로 쉽게 구현이 가능한 기능이고, 찾아보니 관련 소스를 쉽게 찾아볼 수 있었다.

 

https://3dtransforms.desandro.com/card-flip

Card Flip · Intro to CSS 3D transforms

 

 

필자의 블로그에 적용된 방법은 이렇다.

 

우선 기존 스킨에서 프로필의 뒷면을 위한 이미지 태그를 생성하고,

 

기존 div 태그에 클래스(card, card__face, card__face--fron 등등)를 추가한다.

 

필자의 블로그에 적용된 태그는 아래와 같다.

<div class="card imgbox">
    <!--<a href="[##_blog_link">-->
        <div class="card__face card__face--front">
            <img src="[##_image" alt="Profile" />
        </div>
        <div class="card__face card__face--back">
            <img src="./images/profile.png" alt="Profile" />
        </div>
    <!--</a>-->
</div>
 

./images/profile.png 를 업로드 하는 대신, 프로필 사진이 있는 링크를 넣어주어도 좋다.

 

 

다음, 기존 images/main.css 를 수정해준다.

 

커스터마이징이 안된 블로그의 경우엔 새로 생성하거나 아니면 style.css 를 수정해 주면 된다.

 

(많이 다를 수도 있다.)

 

 

우선 기존의 imgbox 클래스의 스타일을 아래와 같이 수정해주고

.blogimg_box .imgbox { 
    /*overflow:hidden;*/
    width: 160px;
    height: 160px;
    margin: 0 auto 17px;
    border: none;
}
 
.blogimg_box .imgbox img {
    max-width: 100%;
    border: none;
    border-radius: 50%;
}

 

아래와 같이 코드를 추가해준다.

 

최대한 자연스럽게 뒷면이 나오고,

필자는 앞 뒷면 이미지가 겹칠때 나오는 검은 선을 최대한 줄이기 위해 애니메이션을 추가했다.

맥북 크롬에서 보니 충돌이 났다. 그래서 그냥 기존 CSS 를 그대로 적용하니까 정상적으로 된다(?)

 

처음에 안되서 수정했던건데 뭐지? 싶었음 😅

 

.card {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
}
 
.card.is-flipped {
    transform: rotateY(180deg);
}
 
.card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    backface-visibility: hidden;
}
 
.card__face--front {}
 
.card__face--back {
    transform: rotateY(180deg);
}

 

마지막으로, 스크립트 하나를 넣어주면 완성.

 

해당 스크립트는 <script>...</script> 태그로 감싸서 skin.html 맨 마지막이나,

아니면 기존 script.js 에 넣어주면 된다.

var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
    card.classList.toggle('is-flipped');
});

 

'click' 이 아닌 'mouseover' 로 수정해볼까도 생각해봤는데, 모바일에서는 어차피 클릭을 해야하는터라 그렇게 하진 않았다.

(다른분들은 mouseover 로 테스트 해보는 것도 좋을듯..)

 

이렇게 넣으면 완성. 모바일에서도 정상적으로 작동한다.

 

추가로 클릭할때마다 다른 사진을 랜덤하게 가져오게 하는 것도 재밌을거 같다. 🤣