wake-up-neo.com

Breite und Höhe des CSS-Übergangs vom Mittelpunkt des Bereichs div

Ich habe Elemente mit Position: absolut; dass ich in bestimmten Situationen wechseln möchte. Der Ursprung des Breiten- und Höhenübergangs scheint jedoch von den Werten oben/unten links/rechts abzuhängen.

Gibt es eine Möglichkeit, mehr Kontrolle darüber zu haben?

Ich suche spezifisch, um vom Zentrum des div zu wechseln.

Gibt es eine Lösung, die nicht darauf angewiesen ist, auch die oberen/unteren linken/rechten Werte zu ändern?


Bearbeiten :

Ich möchte die Breite und Höhe beibehalten.

Vielen Dank für die Antworten, aber die Verwendung von Die Transformationsskala ist keine Lösung in diesem Fall. Prozentangaben in der Transform-Eigenschaft beziehen sich auf die Größe des Rahmens des Elements, nicht auf den Container. Sehen Sie zum Beispiel this JSFiddle , wie sich das Endergebnis des Schwebefluges über den beiden Elementen unterscheidet.


JSFiddle

div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
}
*:hover{
  width:10%;
  height:10%;
}
div{
  top:10%;
  left:10%;
}
span{
  bottom:10%;
  right:10%;
}
<div></div>
<span></span>

8
Alvaro

Nun, Sie können transform - scale immer für diese Angelegenheit verwenden: 

div {
  background:pink;
  width:200px;
  height:200px;
  transition:all 1s ease;
}
div:hover{
        -webkit-transform: scale(0.1);
        -ms-transform: scale(0.1);
        transform: scale(0.1);
}
<div></div>

4
Chen

Sie können die Position gleichzeitig ändern, um den Effekt zu simulieren. Aber ich bin bei den anderen: transform: scale ist ein besserer Ansatz dafür.

div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
}
div{
  top:10%;
  left:10%;
}
div:hover{
  width:10%;
  height:10%;
  top: 20%;
  left: 20%;
}
span{
  bottom:10%;
  right:10%;
}
span:hover{
  width:10%;
  height:10%;
  bottom: 20%;
  right: 20%;
}
<div></div>
<span></span>

Version mit Transformationen:

div, span {
  width:30%;
  height:30%;
  background: red;
  transition: all 1s ease;
  position: absolute;
}
div{
  top:10%;
  left:10%;
}
div:hover{
  transform-Origin: 50% 50%;
  transform: scale(0.3);
}
span{
  bottom:10%;
  right:10%;
}
span:hover{
  transform-Origin: 50% 50%;
  transform: scale(0.3);
}
<div></div>
<span></span>

3
Jordi Nebot

Ich würde vorschlagen, transform: translate beim Animieren von Positionen zu verwenden, da dies besser für die Leistung ist, und Sie können dann seinen Ursprung mit transform-Origin steuern.

Wenn Sie die Breite oder Höhe ändern möchten, können Sie auch transform: scale verwenden.

Angenommen, Sie möchten etwas von der Mitte nach außen verdoppeln. Dann müssen Sie nur transform: scale(2.0) schreiben, da der Standardwert von transform-Origin50% 50% ist.

Siehe Beispiel hier: https://jsfiddle.net/ydpx284g/

2
MateBoy

Sie sind sich nicht sicher, ob Sie genau das suchen, aber diese Lösung basiert nicht auf dem transform: scale und Sie können die gewünschte Breite und Höhe Ihres div-Werts auch manuell in Prozent einstellen. 

Und der Prozentsatz ist relativ zur Breite des Containers.

HTML

<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

#container{
  width: 400px;
  height: 400px;
  background: #eee;
  position: relative;
}

.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  width: 20%;
  height: 20%;
  transition: 0.3s;
  cursor: pointer;
}

.box:hover{
  width: 7%;
  height: 10%;
}

.box:nth-child(2){
  left: 20%;
}

.box:nth-child(3){
  top: 20%;
}

.box:nth-child(4){
  top: 20%;
  left: 20%;
}

#container {
  width: 400px;
  height: 400px;
  background: #eee;
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  width: 20%;
  height: 20%;
  transition: 0.3s;
  cursor: pointer;
}
.box:hover {
  width: 7%;
  height: 10%;
}
.box:nth-child(2) {
  left: 20%;
}
.box:nth-child(3) {
  top: 20%;
}
.box:nth-child(4) {
  top: 20%;
  left: 20%;
}
<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

1
SvenL

Der beste Weg ist die Verwendung von Matrix. Dadurch können Sie Übergänge und Transformationen kombinieren. Die Matrix benötigt 6 Argumente 

transformation: Matrix (a, b, c, d, e, f);

Woher

a = X-Achse

b = skewX

c = schief

d = Y-Achse

e = Position X

f = Position Y

In diesem Fall stelle ich die Skala auf der X-Achse (die die Breite ändert) auf das Doppelte der ursprünglichen Breite nach dem Schwebeflug ein. (Der Wert 2 bedeutet anfängliche Skalierungszeiten 2) Die Skalierung auf der Y-Achse wird nicht geändert (der Wert 1 bedeutet anfängliche Skalierungszeiten 1, die Höhe ändert sich also nicht). Die übrigen Argumente sind 0, weil Sie müssen sie in diesem Fall nicht verwenden. 

.example {
  width: 30%;
  height: 30%;
  background-color: pink;
  position: absolute;
  top: 35%;
  left: 35%;
  transition: width, height, transform 1s;
}
.example:hover {
  transform: matrix(2, 0, 0, 1, 0, 0);
}
<div class="example"></div>

1
PoloK

Sie können mit transform: translate(-50%, -50%); versuchen, ob dies hilft.

.example {
  width: 30%;
  height: 30%;
  background: pink;
  transition: all 1s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.example:hover {
  width: 10%;
  height: 10%;
}
<div class="example"></div>

0
Stickers

Versuchen Sie das zu erreichen? Mit translate wird die Position des Elements basierend auf der Breite und Höhe des Elements selbst geändert.

div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
  transform: translate(-50%, -50%);
}
*:hover{
  width:10%;
  height:10%;
}
div{
  top:25%;
  left:25%;
}
span{
  top:75%;
  left:75%;
}
<div></div>
<span></span>
0
Ricky Stefano