防止子级继承CSS中的旋转变换

Question

我正在对父级执行 CSS 变换：旋转，但希望能够消除对某些子级的这种影响 - 是否可以不使用反向旋转？

反向旋转确实有效，但它会影响元素的位置，并且可能会对性能产生负面影响（？）。无论如何，它看起来都不像一个干净的解决方案。

我尝试了这个问题中的“transform：none”建议防止孩子继承转换css3，但它根本不起作用 - 请参阅此处的小提琴：http://jsfiddle.net/NPC42/XSHmJ/

Answer 1

也许你必须这样写：

.child {
    position: absolute;
    top: 30px;
    left: 50px;
    background-color: green;
    width: 70px;
    height: 50px;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

查看更多http://jsfiddle.net/XSHmJ/1/

更新：

您可以为此使用

:after & :before

伪类。

检查这个http://jsfiddle.net/XSHmJ/4/

Answer 2

我相信您将需要使用第二个子元素来伪造它，该规范似乎不允许您想要的行为，并且我可以理解为什么子元素的位置必须受到转换的影响它的父级。

这不是最优雅的解决方案，但我认为您正在尝试做规范永远不会允许的事情。看看我的解决方案的以下小提琴：

---

.parent {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 70px;
}

.child1 {
  background-color: yellow;
  width: 200px;
  height: 150px;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.child2 {
  position: absolute;
  top: 30px;
  left: 50px;
  background-color: green;
  width: 70px;
  height: 50px;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Answer 3

如果您想对父级应用变换效果而不影响其子级，您可以简单地为父级的伪元素设置动画，如下所示：

.parent {
  display: inline-block;
  position: relative;
}

.parent::before {
  content: "";
  background: #fab;

  /* positioning / sizing */
  position: absolute;
  left: 0;
  top: 0;

  /* 
        be aware that the parent class have to be "position: relative"
        in order to get the width/height's 100% working for the parent's width/height.                
  */
  width: 100%;
  height: 100%;

  /* z-index is important to get the pseudo element to the background (behind the content of parent)! */
  z-index: -1;
  transition: 0.5s ease;
  /* transform before hovering */
  transform: rotate(30deg) scale(1.5);
}

.parent:hover::before {
  /* transform after hovering */
  transform: rotate(90deg) scale(1);
}

这实际上对我有用。 JSFiddle

Answer 4

好的，但是...你可以在不旋转子项的情况下设置父项的旋转动画吗？ 一直试图破解这个问题有一段时间了，但我卡住了......:(

.layout {
  display: grid;
  grid-template-columns: 1fr 4fr;
  height: 100vh;
  width: 80%;
  padding-top: 25px;
  gap: 1rem;
}
.nav {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-pic {
  border-radius: 50%;
  width:100px;
  height:100px;
}

#cont{
  background: linear-gradient(to top left, #28b487, #7dd56f);
  width: 100%;
  border-radius: 50%;
  padding: 10px;
  margin: 0;
  line-height: 0;
  position: relative;
  animation: rotate 5.2s infinite linear;
 }
  
#box{
  background: #000000;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 0;
  margin: 0;
}


@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}

<div class="layout">
  <div class="nav">
  <!--  a div dynamically positioned on page... -->
  
    <!--  content to animate -->
    <div id="cont">
      <!--  keep this still -->
      <div id="box">
        <img src="maple.jpg" class="profile-pic">
      </div>
    </div>
    
    
  </div>
</div>