[SOLVED] rotate a image within background-blend-mode

rotate a image within background-blend-mode

I wonder if there is a possibility to rotate an image within background-blend-mode. I want to rotate my second image: GLRlogo_RGB.png. I've tried it to transform, translate but it doesn't seem to work that way. Can anyone help me with a solution? Thanks!

Here my code

#main-image-3{
        background-image: url(../img/layout-picture4.jpg), url(../img/GLRlogo_RGB.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover, calc(15rem + 10vw);
        margin: 0 0 73rem 0;
        transform: rotate(0,0,45deg);
        }

        #main-image-1, #main-image-2, #main-image-3{
        background-color: rgba(9, 231, 9, 0.301);
        background-blend-mode: screen, multiply; 
    }

Solution

The only way I know to do that is by seting your background property to a pseudo element ::before or ::after then apply the rotation to it and hide what is overlapping with overflow:hidden like so

.back-rotate {
  width:500px; /*it's important to have a size for the relative size of the ::before pseudo element*/
  height:200px;
  position:relative; /*also important, but if you don't use it, then set the ::before to 'relative' instead of 'absolute' and .back-rotate to 'static' */
  overflow:hidden;
}

.back-rotate::before {
  content:'';
  position:absolute;
  /*positioning my background relatively to the main container*/
  width:200%;
  height:200%;
  top:-50%;
  left:-50%;
  /*layer position 0 so he get behind what the div contains (text etc) */
  z-index:0;
  
  /*the rotation*/
  background-size:cover;
  background-position:center center;
  transform:rotate(45deg);
}
/* my background image */
.back-rotate::before {
  background-image:url('https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg');

<div class='back-rotate'></div>