12

私はCSS変換を実行しています：親で回転しますが、一部の子でこの効果を無効にできるようにしたいです-逆回転を使用せずに可能ですか？

逆回転は機能しますが、要素の位置に影響し、パフォーマンスに悪影響を与える可能性があります（？）。いずれにせよ、それはきれいな解決策のようには見えません。

私はこの質問からの「変換：なし」の提案を試しましたが、子供が変換css3を継承するのを防ぎますが、それは単に機能しません-ここのフィドルを参照してください：http：//jsfiddle.net/NPC42/XSHmJ/

4

3 に答える 3

12

あなたはこのように書かなければならないかもしれません：

.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これにはpsuedoクラスを使用できます。

これをチェックしてくださいhttp://jsfiddle.net/XSHmJ/4/

于 2012-03-01T09:31:06.417 に答える
9

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>

于 2012-03-01T09:51:53.677 に答える
4

子に影響を与えずに親に変換効果を適用する場合は、次のように親の疑似要素をアニメーション化するだけです。

.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

于 2016-04-08T11:02:15.107 に答える