Is there a way to rotate images in CSS without causing them to overlap with other elements on the page? When I try to adjust the rotation property, the image sticks to the top of the page and overlaps the navigation bar.
Below is the code snippet:
HTML Code Block
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<Title>OTF Official Website</Title>
<link href = "OTFstyle.css" rel = "stylesheet">
<script src = "OTFscript.js"></script>
</head>
<body>
<div class = "header">
<img src = "icons/otflogo.png" alt = "Logo" id = "logo">
</div>
<div class = "toolbar">
<div class = "home">
<img src = "icons/home.png" alt = "Home" id = "homeicon">
<p id = "text">Home</p>
</div>
<div class='ppl'>
<img src="icons/ppl.png" alt="Members" id="personicon">
<p id="text">Members</p>
</div>
<div class="cam" >
<img src="icons/cam.png" alt="Pics and Videos" id="camicon">
<p id="text2"> Pics</p>
</div>
<div class = "mem">
<img src="icons/mem.png" alt="Memories" id="memoryicon">
<p id="text3"> Memories</p>
</div>
</div>
<div class="intro">
<img src="frames/frame1.png" id='frame1'>
<img src="frames/frame2.png" id='frame2'>
</div>
</body>
</html>
CSS Code Block
/*Entire pg*/
html,body{
background-color: rgb(144, 141, 141);
margin: 0;
padding: 0;
width: 100%;
}
body{
height:1000px;
}
/*Div containing the header*/
.header{
border:solid;
height:80px;
display:flex;
background-color: whitesmoke;
}
/*otf logo*/
#logo{
object-fit: cover;
width: 120px;
height: 120px;
margin-top:-20px;
}
/*Div containing the entire toolbar*/
.toolbar{
top:0px;
position:sticky;
height:60px;
display:flex;
justify-content: space-evenly;
background-color: wheat;
}
/*Div containing Home icon*/
.home{
display:block;
height:60px;
justify-content: center;
}
/*Div containing members icon*/
.ppl{
display:block;
height:60px;
justify-content: center;
}
/*Div containing members icon*/
.cam{
display:block;
height:60px;
justify-content: center;
}
/*Div containing memories icon*/
.mem{
display:block;
height:60px;
justify-content: center;
}
/*The icons themselves in the toolbar*/
#homeicon{
height:40px;
}
#personicon{
height:40px;
}
#camicon{
height:40px;
}
#memoryicon{
height:40px;
margin-left:11px;
}
/*Text under home and members icon*/
#text{
margin-top:0px;
}
/*Text under pics icon*/
#text2{
margin-top:0px;
margin-left:15px;
}
/*Div containing memories icon*/
#text3{
margin-top:0px;
}
/*Div containing the images*/
.intro{
border:solid;
display:block;
background-color: white;
}
/*First image*/
#frame1{
height:300px;
rotate:50deg;
}
/*Second image*/
#frame2{
height:300px;
margin-left:-100px;
}
I tried rotating an image using CSS, but it caused overlapping issues with other elements on the page. Any suggestions or solutions would be greatly appreciated. Thank you!