旋转伪元素切割问题

Question

我正在尝试旋转具有背景图像的伪元素。由于它的背景位于主要元素的中心，为了达到效果，它在旋转时被剪切了。

我创建了一个示例，使用随机图像，只是为了说明我的意思。我想知道这种方法有什么问题以及为什么它被削减了。有什么方法可以在不切断背景的情况下旋转背景吗？

谢谢。

$(document).ready(function () {
 'use strict';
 $('button').on('click', () => {
  $("li").addClass('issue-simulation');
 })
});

ul {
  display: flex;
  list-style: none;
  padding: 0;
}
ul li {
  position: relative;
  display: flex;
  width: 200px;
  height: 200px;
}
ul li:after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background-image: url(https://picsum.photos/180/180);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 650ms cubic-bezier(0.5, 0, 0.1, 1);
}
ul li:hover:after {
  transform: rotate(-10deg);
}
ul li.issue-simulation:after {
  background-position: calc(50% + 50px) center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <img src="https://picsum.photos/200/200" alt="">
  </li>
</ul>
<button>Simulate issue</button>

Answer 1

你的问题是因为你在操纵 background-position。您不能强制背景图像溢出其包含的父级：这是您无法解决的问题。

我认为您的问题可能是 XY 问题，因为我想您运行遇到了 compositing/combining t运行sforms 的问题。 这样的事情不会工作:

ul li:hover:after {
  transform: rotate(-10deg);
}
ul li.issue-simulation:after {
  transform: translateX(50px);
}

...因为 transform 属性不是可加的（即你不能组合 transform 属性）

因此，正确的解决方案实际上是使用 CSS 个变量：

声明基本外观运行ce

:root {
  --rotate: 0deg;
  --translateX: 0;
}

将这些变量应用于伪元素的样式：

ul li:after {
  transform: translateX(var(--translateX)) rotate(var(--rotate));
}

然后，您使用 JS 以编程方式操作这些 CSS 变量：

const root = document.documentElement;

 $('ul li')
   .on('mouseover', () => root.style.setProperty('--rotate', '-10deg'))
   .on('mouseout', () => root.style.setProperty('--rotate', '0deg'));

 $('button').on('click', () => root.style.setProperty('--translateX', '50px'))

$(document).ready(function() {
  const root = document.documentElement;

  $('ul li')
    .on('mouseover', () => root.style.setProperty('--rotate', '-10deg'))
    .on('mouseout', () => root.style.setProperty('--rotate', '0deg'));

  $('button').on('click', () => root.style.setProperty('--translateX', '50px'))
});

/* CSS variables */

:root {
  --rotate: 0deg;
  --translateX: 0;
}

ul {
  display: flex;
  list-style: none;
  padding: 0;
}

ul li {
  position: relative;
  display: flex;
  width: 200px;
  height: 200px;
}

ul li::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background-image: url(https://picsum.photos/180/180);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 650ms cubic-bezier(0.5, 0, 0.1, 1);
  /* Apply `transform` to the actual pseudo-element */
  transform: translateX(var(--translateX)) rotate(var(--rotate));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <img src="https://picsum.photos/200/200" alt="">
  </li>
</ul>
<button>Simulate issue</button>

旋转伪元素切割问题

Rotating pseudo element cut issue

css

pseudo-element