725

CSS を使用して、複数の を適用するにはどうすればよいtransformですか?

例: 以下では、回転ではなく平行移動のみが適用されます。

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}
4

8 に答える 8

1213

次のように、それらを 1 行に配置する必要があります。

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

複数の変換ディレクティブがある場合、最後のディレクティブのみが適用されます。他の CSS ルールと同様です。

複数の transform one line ディレクティブが右から左に適用されることに注意してください。

これ:transform: scale(1,1.5) rotate(90deg);
および:transform: rotate(90deg) scale(1,1.5);

同じ結果は得られません:

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}
<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>

于 2012-05-26T11:17:42.260 に答える
30

追加のマークアップ レイヤーを使用して複数の変換を適用することもできます。

<h3 class="rotated-heading">
    <span class="scaled-up">Hey!</span>
</h3>
<style type="text/css">
.rotated-heading
{
    transform: rotate(10deg);
}

.scaled-up
{
    transform: scale(1.5);
}
</style>

これは、JavaScript を使用して要素を変換してアニメーション化する場合に非常に便利です。

于 2016-09-15T09:20:34.290 に答える
0

1行のcssで回転と翻訳を変換します:-どのように?

div.className{
    transform : rotate(270deg) translate(-50%, 0);    
    -webkit-transform: rotate(270deg) translate(-50%, -50%);    
    -moz-transform: rotate(270deg) translate(-50%, -50%);    
    -ms-transform: rotate(270deg) translate(-50%, -50%);    
    -o-transform: rotate(270deg) translate(-50%, -50%); 
    float:left;
    position:absolute;
    top:50%;
    left:50%;
    }
<html>
<head>
</head>
<body>
<div class="className">
  <span style="font-size:50px">A</span>
</div>
</body>
</html>

于 2018-12-27T11:20:18.097 に答える