HTML5 translate relatif à la page

Comment pouvez-vous appliquer un translate à un élément mais le faire passer à un point sur la page plutôt que par rapport à lui-même?HTML5 translate relatif à la page

Par exemple, dans le code ci-dessous les éléments "carte" se déplaceront de 50, 100 par rapport à leur position de départ. Ce que je veux, au contraire, c'est de se déplacer au centre de la page.

<html> 
<head> 
<style> 

.face { 
    -webkit-backface-visibility: hidden; 
    position: absolute; 
    height: 140; 
    width: 80; 
    overflow: hidden; 
} 

.card { 
    height: 100; 
    width: 80; 
    float: left; 
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); 
    margin-left: 5px; 
    -webkit-transition-property: transform; 
    -webkit-transition-duration: 0.25s; 
    -webkit-transition-timing-function: ease-out; 
} 

.activated { 
    -webkit-transform: scale(2) translate(50px, 100px); 
    -webkit-transition-duration: 0.35s; 
    -webkit-transition-timing-function: ease-in; 
} 

</style> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 

$(document).ready(function() { 
    $('.card').click(function (e) { 
     e.preventDefault(); 
     $(this).toggleClass("activated"); 
    }); 
}); 

</script> 
</head> 

<body> 

<div class="card"> 
<div class="face front"> 
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" /> 
<span>blah!</span> 
</div> 
<div class="face back">explanation</div> 
</div> 

<div class="card"> 
<div class="face front"> 
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" /> 
<span>blah!</span> 
</div> 
<div class="face back">explanation</div> 
</div> 

<div class="card"> 
<div class="face front"> 
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" /> 
<span>blah!</span> 
</div> 
<div class="face back">explanation</div> 
</div> 

<div class="card"> 
<div class="face front"> 
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" /> 
<span>blah!</span> 
</div> 
<div class="face back">explanation</div> 
</div> 


</body> 
</html>

Source

2010-06-07 ʞɔıu

Cela n'a pas fait quoi que ce soit à faire avec HTML5. C'est CSS3. – mercator

Je ne pense pas que vous devriez utiliser translate() pour cela. Je suppose que vous pourriez simplement calculer les valeurs correctes ou manipuler le transform-origin en utilisant JavaScript, mais ce genre de défaites l'objectif d'utiliser des transformations CSS.

Vous pouvez animer des propriétés aussi bien, pour que vous puissiez retirer le translate() de .activate et changer la propriété de transition pour .card à:

-webkit-transition-property: all;

Vous pouvez ensuite utiliser « régulière » CSS pour faire le positionnement et la transition fera le reste. Par exemple. ajouter ces propriétés à .activated:

position: absolute; 
top: 50%; 
left: 50%; 
margin-top: -50px; 
margin-left: -40px;

Il y a plutôt un peu d'un problème avec cela, cependant. Bien que CSS puisse facilement faire la transition entre les propriétés top, left et margin, il ne peut pas effectuer de transition en douceur avec la propriété position. Ainsi, lorsqu'une carte est activée, elle passe d'abord en haut à gauche, puis se déplace doucement vers le centre de la page.

Je ne suis pas sûr s'il y a une solution à cela autre que le positionnement des cartes originales aussi bien.

En outre, en utilisant le translate(), la position des autres cartes n'est pas affectée lorsque vous activez l'une d'entre elles. Dans mon exemple, cependant, la carte activée est retirée du flux, donc les autres cartes se déplaceront à gauche pour remplir l'espace (comme le font les éléments flottants). Ce n'est peut-être pas ce que vous voulez non plus. Cela ne se produirait pas si vous positionniez tout d'abord tous pour commencer.

Bien sûr, il y a beaucoup de questions dans les spécifications elles-mêmes sur des questions comme celle-ci étant donné qu'ils sont encore au stade expérimental:

Source

2010-06-07 16:15:43 mercator

puisqu'il utilise jQuery, afin d'empêcher le saut à 0,0 il peut tirer la position absolue et changer les valeurs appropriées quand il ajoute la classe '.activated'. Quelque chose comme 'var thisOffset = $ (this) .offset(); $ (this) .css ({'position': 'absolute', 'top': thisOffset.top, 'left': thisOffset.left}). addClass ('. activated'); ' – mVChr

J'ai fini par utiliser jquery pour cloner l'élément, positionner absolument le clone sur l'original qui a alors sa visibilité désactivée, et faire l'animation sur ce –

Répondre

Questions connexes