Using Transform not showing in browser

Bootstrap Studio Help
1

I am new to this transform stuff so bare with me. I have an image that I'm trying to get the Transform attributes set on, and in fact in BSS it is working and shows just fine, but in the preview there is no transform showing at all. Is this normal? Shouldn't it be giving us what we set it at or are transform setups something that needs to use external files so it won't work until I export? I don't have anything major in the code, but here's what I added to an image tag to play around with this:

I pulled the code from this example: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform

.footer-ribbon {
  width: 40%;  /* this is just for testing, will resize after I make sure it's all working and what size I need */
  border-radius: 0 25px 0 25px;
  filter: brightness(75%);
  -ms-transform: rotate(-50deg);
  /* IE 9 */  -webkit-transform: rotate(-50deg);
  /* Safari 3-8 */  transform: rotate(-50deg);
  transform: rotate(-50deg);
}

EDIT Of course I answered my own question kind of, right after posting lol. I had an animation on it which apparently was conflicting with the rotate. Are we not able to use both animation and Transform on the same element?

And once again I see that I can put it in a div/column/etc. and animate that instead of the image, and add the Transform to the image and it seems to work.

But ... would still like to know if there's something I am doing wrong with adding both to the image, or if that's just how it is. :)

2

@jo, what is the animation? If you're using transforms in your animation, they will override the transform in the other block. So if you have for example: transform: scale(.5); in your animation, you need to add the rotate(-50deg). So it becomes transform: rotate(-50deg) scale(.5);.

If you're using one of the built-in animations, you could override it, but I think it would be better to add a wrapping element to the image and animate it instead (as you have done).

3

Thanks Gabriela,

Yeah I'm learning here that it might be better to animate or rotate the container rather than the actual content. I was using a the code from that link to rotate the image itself, and then had the animation set within BSS's animation settings and that's what wasn't working. I think I got it worked out though, but like I said, I don't know a lot about either of these things so it's a learning process.