Frage Fügen Sie einen Transformationswert hinzu, ohne die Erben zu löschen [duplizieren]


Diese Frage hat hier bereits eine Antwort:

Also ich habe folgendes CSS:

div {
  transform: translate(10, 10);
}

div.active {
  transform: scale(1.1);
}

Das Problem ist, dass a div.active nicht translate und nur scales.

Ist da nicht ein? Nur CSS (mit JS Ich weiß, ich kann) etwas schreiben wie:

div.active {
  transform: inherit scale(1.1);
}

?

Ist das ein CSS3-Designproblem?


5
2018-05-21 10:20


Ursprung


Antworten:


div {
  transform: translate(10px, 10px);
  width: 100px;
  height: 100px;
  background: lightblue;
  display: inline-block;
  margin: 50px;
}
div.active {
  transform: translate(10px, 10px) scale(1.1);
}
div.active2 {
  transform: scale(1.1) translate(10px, 10px) rotate(45deg);
}
<div></div>
<div class="active"></div>

Die Transformationseigenschaft Ihres active Klasse überschreibt den ursprünglichen Wert.

Du müsstest angeben beide in deiner aktiven Klasse.

Hinweis: translate Werte erfordern Einheiten

div {
  transform: translate(10px, 10px);
}

div.active {
  transform: translate(10px, 10px) scale(1.1);
}

2
2018-05-21 10:25