Image perfectly aligned within a rotating container

I have a project where I want to create a visual element with an image inside a rotated container (div). However, I'm facing an issue where the image also rotates along with the container. Is there a way to keep the image straight and cover the container while it's being rotated?

<template>
  <div class="p-4">
    <div class="w-80 h-80 bg-blue-500 rotate-90">
      <div class="w-80 h-80 bg-red-500 rotate-45">
        <img
          class="h-full w-full object-cover object-center"
          src="https://www.aerointernational.de/content/uploads/2022/09/albums-global-8000-exterior-1_0-scaled-1150x600.jpg"
          fit="fill"
          alt="aircraft"
        />
      </div>
    </div>
  </div>
</template>

If you'd like to see a visual demonstration of the issue, please visit the following link on codesandbox: https://codesandbox.io/s/hardcore-microservice-vix2uh?file=/pages/index.vue

The technologies I am using for this project are Nuxt.js and Tailwind CSS.

cssnuxt.js

Answer №1

Check out this cool example using clip path: https://play.tailwindcss.com/abc123XYZ

If you want another option, take a look at this one too: https://play.tailwindcss.com/123XYZabc

<div class="m-20">
  <section class="relative pt-20 pl-8">
    <div class="absolute h-64 w-64 rotate-45 rounded-3xl bg-blue-500"></div>
    <img class="absolute h-64 w-64 -rotate-[38deg] rounded-3xl object-cover object-center" src="http://i.imgur.com/kreZqnx.jpg" fit="fill" alt="aircraft" />
  </section>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing a material-ui theme with withStyles() in conjunction with withTheme()

After developing a series of reusable components, I started styling them by utilizing classes prop to override the MUI classnames. To streamline the process and prevent repetition in more intricate components, I consolidated common styles into a theme. Eac ...

cssreactjstabsthemesmaterial-ui

Increased Z-index on an unfamiliar site

I'm in the process of enhancing the Moodle platform at my school with a userscript, and I want to create a sleek UI for it. One feature I want to add is a progress bar that stays fixed at the top of the browser viewport so that it remains visible as ...

javascriptjqueryhtmlcssz-index

A guide on showcasing items on an html webpage through the use of javascript

Currently, I have a series of hardcoded HTML elements in my code snippet. <!-- Reciever Message--> <div class="media w-50 ml-auto mb-3"> <div class="media-body"> ...

javascripthtmlcssbootstrap-4

Employ CSS Grid to properly position the crimson section within the confines of the scarlet border on Level 77 of Grid Attack

I spent hours struggling with level 77 of Coding Fantasy: Grid Attack. No matter what I tried, nothing seemed to work. There are no solutions provided in the game, and there's no way to skip the level. Can anyone help me with the solution please? ...

htmlcssflexboxgridcss-grid

What causes the image to remain unchanged while the rest of the divs update when navigating with the previous, next, or random buttons?

Whenever I interact with the navigation buttons - specifically previous, next, and random - the contents of all div elements change accordingly. The image element, however, remains unchanged. I am encountering an issue where the image does not correspond t ...

javascripthtmlcssarrays

scss: creating variables dynamically using arrays

I am working on a dynamic way to generate different classes based on colors $colors: "dark" #3E3E3E, "darker" #3E3E3E, "light" #ECECF0, "green" #00A87B, "yellow" #FFBB3B, "red ...

csssassscss-lint

Issue with getting Bootstrap sticky-top to function on sidebar column

My goal is to implement a sticky sidebar on the right side of the page. The sidebar menu is contained within a grid column. I have attempted to utilize the sticky-top class, following the guidance provided in this question, but unfortunately, it does not s ...

htmlcssbootstrap-4sticky

Tips for animating an element in a straight line while also rotating it using CSS

Whenever I apply the transform property to an element for translate3d and rotate3d, it ends up orbiting around. My goal is to have a linear motion while rotating. I have utilized webkit animations in CSS img{height:50px; width:50px; animation:tt; ...

htmlcss

Display the closing tag depending on specific conditions to simulate the behavior of a calendar

Is it possible to conditionally render a closing tag using v-if? If so, what is the correct way to do it? Initially, I tried the following: <template v-for="day in days"> <td class="days">{{day.number}}</td> <template v-if ...

javascriptcssvue.jsvuejs2vue-component

The canvas element on a simple HTML webpage is constantly set to a size of 300x150

In an attempt to simplify my problem, I have created a basic HTML document with a <canvas> element: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { border: 1px solid #ff5500; ...

javascripthtmlcsscanvas

Are there any great C# applications built on asp.net?

Seeking recommendations for quality open source ASP.NET (C#) applications that align with the following criteria: Well-designed and structured with multiple tiers Clean, well-commented codebase Incorporates various design patterns effectively Web pages ...

c#asp.netcssdesign-patterns

the width of the table body is narrower than the table itself

I'm working on a table that has a fixed first column and needs to be vertically scrollable. I'm almost there with my CSS code, but the table rows are not as wide as the columns and I'm unsure why this is happening. .table th:first-child, ...

javascripthtmlcss

Divs with floating left have a complete vertical border on their right side

I would like the first and second divs to have a full height border on their right side while floating left. CSS: div.wrapper { border: 1px solid black; } div.wrapper > div { text-align: center; width: 50px; padding-left: 5px; fl ...

htmlcss

The functionality of Angular animate becomes compromised when there is a conflict between predefined CSS states and transition states

Explore this example CSS code: /* animations at the start */ .error-animation.ng-enter { -webkit-transition: 0.5s linear all; transition: 0.5s linear all; opacity: 0; } ...

javascriptcssangularjsanimationng-animate

Sticky CSS - A guide to making aside elements fill the entire available height

How can I create a grid layout where the aside is sticky to top: 0 and fills all remaining height (e.g. 100% of height), but when scrolling down, the aside height should be changed to 100% minus the footer's height? Is it possible to achieve this with ...

csscss-positionsticky

Upon refreshing the page, Vuex encounters an issue where it is unable to read

My website has a Navbar component that utilizes values from the Vuex store. Prior to entering each route, I trigger a dispatch from Vuex as shown below: router.beforeEach((to, from, next) => { //... store.dispatch("updateUserData"); ...

javascripthtmlcsstypescriptvue.js

Just one div with a unique ID, yet still belonging to the same class as another div

Having an issue with two divs that share the same class but have different IDs. Only the one defined first in the HTML code is visible (see screenshot below showing when leftMenu is created first). https://i.sstatic.net/5Znvg.png Below is the HTML layout ...

htmlcss

Skewed top-left border surrounds the element with a dashed design

I'm looking to achieve a border effect similar to the one shown in the image linked below: https://i.sstatic.net/a4hCQ.jpg Here is the code I have tried so far: <p>Some Text</p> p{ -webkit-transform: perspective(158px) rotateX(338deg ...

htmlcssbordercss-shapes

Adjusting the width of a DIV element within a table cell

In my ASP.NET application, I am facing an issue with table column widths not rendering as expected in the browser. Despite setting the column width to 100px, it appears as either 96px or 108px. The problem seems to be related to having a div inside the th ...

htmlcss

Dynamic Column Image and Text Display

I am working on a website where I am trying to have an image on the left and a paragraph on the right, but when the screen size is reduced, I need the layout to switch so that the image is at the top and the paragraph is at the bottom. Even though I have ...

htmlcssflexboxresponsive