rotate background image css

1.theWholeElement{
2  transform: rotate(30deg);
3}
4
5.justTheBackground{
6  position: relative;
7  overflow: hidden;
8}
9
10.justTheBackground::before{
11  content: "";
12  position: absolute;
13  width: 200%;
14  height: 200%;
15  top: -50%;
16  left: -50%;
17  z-index: -1;
18  background: url(background.png) 0 0 repeat;
19  transform: rotate(30deg);
20}

1div {
2  position: absolute;
3  left: 40px;
4  top: 40px;
5  width: 100px;
6  height: 100px;
7  background-color: lightgray;
8}
9
10.rotate {
11  background-color: transparent;
12  outline: 2px dashed;
13  transform: rotate(45deg);
14}
15
16.rotate-translate {
17  background-color: pink;
18  transform: rotate(45deg) translateX(180px);
19}
20
21.translate-rotate {
22  background-color: gold;
23  transform: translateX(180px) rotate(45deg);
24}
25