Question 303751 in Html Question posted in
Some basic documentation can be found here.

Html – How to rotate image in an ellipse?

I am trying to make an ellipse containing an image, which has a border.

I am getting almost there, however I want to rotate the image independently,
so that can bring it back to it’s original position.

This is my code:

.eclipse-outline {
  width: 400px;
  height: 500px;
  border-radius: 50%;
  border: 3px solid #fff;
  overflow: hidden;
  position: relative;
  padding: 20px;
  transform: rotate(20deg);
}

.eclipse-image {
  width: 100%;
  height: 100%;
}

.eclipse-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: rotate(0deg);
  border-radius: 50%;
}
<div class="eclipse-outline">
  <div class="eclipse-image"><img src="https://jourdan.nl/wp-content/uploads/2023/12/healthy-lifestyle-woman-eating-salad-smiling-happy-outdoors-beautiful-day-young-female-food-outside-summer-34259122.jpg" /></div>
</div>

Hope someone can help.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank for your answer, In the way you did it, I was not able to add a required border with margin. So I added a outerdiv and add padding to it, that did the work. Thanks anyway.

    <div class="outerdiv">
<div class="eclipse-outline"><img src="https://jourdan.nl/wp-content/uploads/2023/12/healthy-lifestyle-woman-eating-salad-smiling-happy-outdoors-beautiful-day-young-female-food-outside-summer-34259122.jpg" /></div>
</div>

.outerdiv{
    border: 3px solid white;
    border-radius: 50%;
    transform: rotate(20deg);
    padding: 10px;
}
.eclipse-outline {
  width: 400px;
  height: 500px;
  border-radius: 50%;
  border: 3px solid #f0f;
  overflow: hidden;
  transform: rotate(0deg);
}

.eclipse-outline img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: rotate(-15deg);
}

  2. 0

    I removed the padding, the extra div container, and the position relative. Then you can rotate the image counterclockwise to the main div.

    .eclipse-outline {
  width: 400px;
  height: 500px;
  border-radius: 50%;
  border: 3px solid #f0f;
  overflow: hidden;
  transform: rotate(20deg);
}


.eclipse-outline img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: rotate(-20deg);
}
    <div class="eclipse-outline">
  <img src="https://jourdandoesit.nl/wp-content/uploads/2023/12/healthy-lifestyle-woman-eating-salad-smiling-happy-outdoors-beautiful-day-young-female-food-outside-summer-34259122.jpg" />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search