web-dev-qa-db-fra.com

Largeur et hauteur de la transition CSS à partir du centre de la division

J'ai des éléments avec position: absolute; que je veux faire la transition dans certaines situations. Cependant, l'origine de la largeur et de la hauteur semble dépendre des valeurs haut/bas gauche/droite.

Est-il possible d'avoir plus de contrôle sur cela?

Je cherche spécifiquement à faire la transition du centre de la div.

Existe-t-il une solution qui ne repose pas uniquement sur la transition des valeurs haut/bas gauche/droite?

Modifier :

Je veux garder la transition en largeur et en hauteur.

Merci pour les réponses mais utiliser L'échelle Transform n'est pas une solution dans ce cas. Les pourcentages dans la propriété Transformer font référence à la taille de la zone de bordure de l'élément, pas au conteneur. Voir par exemple ce JSFiddle , en quoi le résultat final du survol des deux éléments est différent.

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>

htmlcsscss3css-transitions
8
Alvaro

Eh bien, vous pouvez toujours utiliser transform - scale d'ailleurs: 

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

Vous pouvez changer la position en même temps pour simuler l'effet. Mais je suis avec les autres: transform: scale est une meilleure approche pour cela.

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 avec transformation:

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

Je suggérerais d'utiliser transform: translate lors de l'animation de positions car c'est meilleur pour la performance et vous pouvez alors contrôler son origine avec transform-Origin.

Et si vous souhaitez modifier la largeur ou la hauteur, vous pouvez également utiliser transform: scale.

Supposons que vous souhaitiez doubler quelque chose en taille du centre vers l'extérieur. Ensuite, il vous suffira d'écrire transform: scale(2.0), car la valeur par défaut de transform-Origin est 50% 50%.

Voir exemple ici: https://jsfiddle.net/ydpx284g/

2
MateBoy

Vous ne savez pas si c'est exactement ce que vous recherchez, mais cette solution n'est pas basée sur le transform: scale et vous pouvez définir manuellement la largeur et la hauteur souhaitées de votre div au survol, même en pourcentage. 

Et le pourcentage est relatif à la largeur du conteneur.

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

Le meilleur moyen consiste à utiliser la matrice, cela vous permet de combiner des transitions et des transformations. La matrice prend 6 arguments 

transformée: matrice (a, b, c, d, e, f);

Où

a = échelle axe x

b = skewX

c = biais

d = échelle axe Y

e = position X

f = position Y

Dans ce cas, je règle l'échelle sur l'axe X (ce qui va modifier la largeur) le double de la largeur initiale après le survol. (La valeur 2 signifie 2 fois l'échelle initiale)) L'échelle sur l'axe des ordonnées n'est pas modifiée (la valeur 1 signifie 1 fois l'échelle initiale, la hauteur ne changera donc pas) Le reste des arguments est 0 car vous n'avez pas besoin de les utiliser dans ce cas. 

.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

Vous pouvez essayer d'utiliser transform: translate(-50%, -50%); pour voir si cela aide.

.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