Jump to content
MichaelF

transform:rotate creates extra space below images

Recommended Posts

I have a conundrum in this web page:

https://allenstown-alt.org/news-analysis/20200812-early-fall-concert.htm

I created some CSS styles to overlap and rotate some photos but they result in a big empty space below the photos. I have to use <p style="margin-top: -350px"> to force the following paragraph upward. The top two photos are animated horizontally.

The styles for the photos are of the form:

.photo1 {
  position: relative; top: 10px; left: 0px; z-index: 1; transform: rotate(-10deg);
}

The photos are grouped in a DIV block and each photo references one of the three defined styles (photo1, photo2, photo3). The two animated photos are in separate DIV blocks because they reference the animation code in the HEAD section.

Can anyone offer advise as to why the transform: rotate property seems to add so much space after the photos?

Share this post


Link to post
Share on other sites

It has been several days since I posted this topic. Does anyone have any advice as to why the transform: rotate property seems to add so much space after the photos on the web page I referenced?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...