css 旋转容器中的直线图像

tkclm6bt 于 2022-11-27 发布在其他

关注(0)|答案(1)|浏览(160)

我试图为我的项目创建一个视觉效果，其中图像被放置在一个旋转的容器（div）中，但是当容器旋转时，里面的图像被旋转到与容器相同的度数。
有谁知道我怎样才能有图像直，并覆盖容器，而容器是旋转的？

<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>

请参阅图像代码与框至，以更清楚地了解此问题.
https://codesandbox.io/s/hardcore-microservice-vix2uh?file=/pages/index.vue
我使用的是Nuxt / Tailwind CSS。

css

来源：https://stackoverflow.com/questions/74504710/straight-image-in-rotated-container

1条答案

按热度按时间

yruzcnhs1#

这一个是使用剪辑路径：https://play.tailwindcss.com/vPFMKkR9WS
否则，您也可以这样做：https://play.tailwindcss.com/Mume9LHfhm

<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>

赞(0）回复(0）举报 2022-11-27

我来回答

css 旋转容器中的直线图像

1条答案

相关问题

热门标签

最新问答