돌아가는 프로필 사진

이런 식으로 돌아가는 프로필 사진을 만들 수 있다.

먼저,

<div class="flip-outer">
        <div class="flip-inner">
            
        </div>
</div>

.flip-outer {
  width: 300px;
  height: 300px;
}

.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

이렇게 외곽을 잡아준다. .flip-outer은 프로필 사진의 크기를 지정해주고 .flip-inner은 안에 들어있는 내용물에 position을 쓰기 위해 position: relative; 속성을 써준다.

 그런 다음, 앞면과 뒷면을 만들어준다.

<div class="flip-outer">
        <div class="flip-inner">
            <img src="/img/profile.png" class="front" alt="">
            <div class="back">
                <h5>개발자 망나뇽</h5>
            </div>
        </div>
    </div>

.front에는 사진 .back에는 프로필 텍스트를 써주고 각각 공중에 떠 있으므로 position: absolute;를 주고 뒷면은

transform: rotateY(180deg);로 돌려서 뒷면처럼 만들어준다. 

.front {
  width: 100%;
  position: absolute;
}

.back {
  width: 100%;
  position: absolute;
  transform: rotateY(180deg);
  /*뒤집었을 때 동그란 원에 글씨가 들어가있게 할 때 넣는 부가옵션
    height: 100%;
    border-radius: 50%;
    padding-top: 50px;
    box-sizing: border-box;
    text-align: center;
  */
}

그런 뒤, .flip-inner에 마우스를 올리면 돌아가게끔 hover 특성을 주고 3d속성을 줘야 우리가 아는 3d 사물처럼 동작하므로 속성을 준다. 그리고 애니메이션처럼 동작하게 transition속성도 준다.

.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 1s;
  transform-style: preserve-3d;
}

.flip-inner:hover {
  transform: rotateY(180deg);
}

그리곤 회전했을때, 거울처럼 뒷면에 앞면이 180도 회전되어서 비치면

.front {
    backface-visibility: hidden;
}
.back {
	background-color: 색깔;
  }

이렇게 주면 앞면이 보이지 않고 내가 입힌 백그라운드색에 글씨가 나오게 된다.