친절한효자손 취미생활

이 방법은 눈속임입니다. 실제로 테두리가 회전하는것이 아닌, 백그라운드의 영역이 돌아가는 것입니다. 총 3단계의 레이어가 필요합니다. 백그라운드에는 overflow: hidden이 적용되고 중간이 회전하는 오브젝트이며 가장 최 상위 요소가 두번째의 백그라운드 요소를 가려서 실제로 테두리처럼 보이게 하는 효과인 것입니다. 말로는 설명이 어려우니까 바로 미리보기부터 살펴보시겠습니다.

 

미리보기

See the Pen CSS3 border rotate by rgy0409 (@rgy0409) on CodePen.

 

다양한 테두리가 div 박스를 회전하고 있습니다. 그러면 자세한 설명 들어갑니다.

 

원리 이해

먼저 그림으로 설명드리겠습니다.

 

총 3개의 요소가 필요합니다. 맨 아래는 전체 크기의 기준이 되는 요소가 사용됩니다. 가운데 사용하는 요소는 테두리 레이어입니다. 회전을 시킬 것이기에 맨 아래의 요소보다 더 크게 만들어줍니다. 그래야 회전할 때 모두 다 보일테니까요.

 

그림으로 다시 설명드리자면 이런 것입니다. 백그라운드의 진한 회색 영역을 테두리 요소가 모두 가려야 합니다. 회전할때도요. 그러니 빨간색 레이어를 회전시에도 완벽하게 가려지도록 만들어 줘야 합니다. 그래서 기준 요소보다 크기를 더 크게 키우는 것입니다. 보통 150%를 적용시키면 됩니다.

 

마지막은 테두리 가림용 요소를 맨 위에 적용시킵니다. 이때 테두리 가림용의 크기는 맨 아래에 적용된 기준 요소보다 좀 더 작아야 합니다. 그래야 테두리 부분이 보일테니까요. 이해 되시죠?

 

맨 아래의 요소에 overflow: hidden을 적용시킴으로서 넘치는 두번째 테두리 영역이 가려집니다. 이렇게해서 테두리 부분만 완벽하게 표현이 됩니다.

 

CSS 살펴보기

HTML 구조는 단순합니다. 기준이 되는 요소만 마크업 해주면 됩니다. HTML에 마크업된건 overflow용이고 테두리 표현과 테두리 가림용은 가상 요소로 되어있습니다. before가 테두리로 표현되는 영역이며 after가 테두리 가림용 영역입니다.

 

body {
    display: flex;
    flex-wrap: wrap;
}

body > div {
    position: relative;
    overflow: hidden;
    margin: 20px;
    border-radius: 10px;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 10px 1px #555;
}

body > div::before {
    position: absolute;
    top: -25%;
    left: -25%;
    display: block;
    content: "";
    width: 150%;
    height: 150%;
    z-index: -1;
    animation: rotate 5s infinite linear;
}

body > div::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: "DIV";
    border-radius: 8px;
    width: 85px;
    height: 85px;
    line-height: 80px;
    text-align: center;
    font-weight: bold;
    background-color: #fff;
    transform: translate(-50%, -50%);
    z-index: 1;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

각 div마다 공통으로 들어가는 부분입니다. 여기에서는 위치 선정과 각 요소의 크기가 정의되어 있습니다. ::before를 보시면 크기를 기존 div 대비 150%로 키웠습니다. 따라서 다시 중심점을 중앙에 위치시키기 위해서 top과 left를 각각 -25%씩 적용시켜 주었습니다. 사실 여기에 transform: translate를 적용시켜서 중심점을 잡으려 했는데 animation에서 이미 transform을 사용해서 그런지 회전이 안 되더라고요. 그래서 어쩔 수 없이 top, left를 강제로 -25%로 적용시켰습니다. 그리고 before 요소에 animation을 적용시켜 무한 반복되는 회전이 적용되고 있습니다.

 

.test1::before {
    background: conic-gradient(#f54 0turn 0.125turn,
            #48f 0.125turn 0.25turn,
            #fc0 0.25turn 0.375turn,
            #1c1 0.375turn 0.5turn,
            #f54 0.5turn 0.625turn,
            #48f 0.625turn 0.75turn,
            #fc0 0.75turn 0.875turn,
            #1c1 0.875turn 1turn);
}

::before 요소에는 테두리로 사용할 색상이 적용되어 있습니다. conic-gradient에 대해서는 이미 한차례 자세하게 설명한 바 있으니 아래의 글을 참고하시면 도움이 될 것입니다.

 

CSS3 : conic-gradient background 백그라운드 색상 표현 방법

 

위에는 test1에 대한 before 요소만 간략하게 보여드렸으나 미리보기의 코드펜 CSS 코드를 살펴보시면 각 div에 대한 before 안에 conic-gradient 속성이 들어있음을 알 수 있습니다. 그렇게해서 회전을 시켜주면 마치 테두리가 돌아가는 듯한 착시를 일으킵니다. 즉 테두리 회전은 눈속임입니다. 이 방법을 응용하여 나만의 멋진 버튼을 만들수도 있을 것입니다. 끝.

 

공유하기

facebook twitter kakaoTalk kakaostory naver band