rotate background image css code example

Example 1: rotate background image css

.theWholeElement{
  transform: rotate(30deg);
}

.justTheBackground{
  position: relative;
  overflow: hidden;
}

.justTheBackground::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);
}

Example 2: how to rotate image in css

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}