본문 바로가기
프로그래밍

CSS 3 배경 이미지만 회전시키기

by hansoo.labs 한수댁 2018. 1. 24.

배경이미지만 회전 시키기

참고: How to apply CSS3 transforms to background images

여기서 중요한 점은 before에서 절대기준으로 회전시킨 후, 본 적용시 회전을 되돌려 놓아야 한다는 점이다.

before에서 적용한 transform 속성키를 본 적용시 0값으로 다시 적용하면 transform은 본래 값으로 초기화된다.


#myelement {
  position: relative;
  overflow: hidden;
  transform: rotate(0deg);
}

#myelement:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(background.png) 0 0 repeat;
  transform: rotate(-30deg);
}

태그

,

댓글0