Css3 transform

Télécharger le projet
Commenter

Description

la source n'est pas vraiment utile tel quelle mais elle sert a comprendre comment fonctionne l'attribut transform du css3

fonctionnement :

-les touche l et m du clavier pour la rotation (rotate)

-les touches droit gauche haut et bas du clavier pour la translation en x et y(translate) sert a definir le centre de rotation

-la molette de la sourie modifie l'echelle de l'image (scale) quand le scale est a -1 l'image est inverse

-le deplacement de la sourie pour le skew

j'ai ajouter en plus une fonction pour pouvoir deplacer l'image avec la souris (drag) et j'ai aussi du faire qq manipes pour opera afin que les valeurs soient en degre car opera les donnes en radian

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
#ombraelem{
position:absolute;
cursor:n-resize;
top:150px;
left:400px;
background-color:green;
}
input{
width:80px;
}
#ske{
width:150px;
}
body{
font-size:22px;
font-family:Verdana, Geneva, sans-serif;
background-color:gray;
}
</style>
<script type="text/javascript" LANGUAGE="JavaScript" src="drag.js"></script>
<script type="text/javascript" language="JavaScript">
var gg=false
var setX;
var setY;
var tt=0
var trX=0
var trY=0
var val=1
function souris(s){
dde=(navigator.vendor) ? document.documentElement.childNodes[1] : document.documentElement;
setX =s.clientX + dde.scrollLeft;
setY =s.clientY + dde.scrollTop;
if(gg==false){
ombra()
}
}

function ombra(){

var oml=(document.getElementById('ombraelem').offsetLeft+(parseInt(document.getElementById('ombraelem').offsetWidth)/2))-setX
var omt=(document.getElementById('ombraelem').offsetTop+(parseInt(document.getElementById('ombraelem').offsetHeight)/2))-setY

if(navigator.vendor){
document.getElementById('ombraelem').style.WebkitTransform='skewX('+oml/3+'deg) skewY('+omt/3+'deg) rotate('+tt+'deg) scale('+val+') translate('+trX+'px,'+trY+'px)';
}

else if(navigator.userAgent.indexOf('Opera')!=-1){
document.getElementById('ombraelem').style.OTransform='skewX('+oml/3+'deg) skewY('+omt/3+'deg) rotate('+tt+'deg) scale('+val+') translate('+trX+'px,'+trY+'px)';
}

else{
document.getElementById('ombraelem').style.MozTransform='skewX('+oml/3+'deg) skewY('+omt/3+'deg) rotate('+tt+'deg) scale('+val+') translate('+trX+'px,'+trY+'px)';
}

document.getElementById('skex').value=Math.round(oml/3*100)/100+' deg'
document.getElementById('skey').value=Math.round(omt/3*100)/100+' deg'
document.getElementById('sca').value=Math.round(val*10)/10
document.getElementById('tranx').value=trX+' px'
document.getElementById('trany').value=trY+' px'
document.getElementById('rot').value=tt+' deg'
}

function tourne(ev){
if (ev.keyCode ==77){
tt+=5
ombra()
}
if (ev.keyCode==76){
tt-=5
ombra()
}
if (ev.keyCode ==38){
trY+=5
ombra()
}
if (ev.keyCode==40){
trY-=5
ombra()
}
if (ev.keyCode==39){
trX+=5
ombra()
}
if (ev.keyCode==37){
trX-=5
ombra()
}
}

function deplace(e){
	
var delta = 0;
delta =((e.wheelDelta) ? e.wheelDelta/120 : -e.detail/3)
val=val+((delta<0) ? -0.1 : 0.1)
ombra()
}

function selecte(ev){
(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault();
}
	
function init(){
var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel')
document.getElementById('ombraelem').addEventListener(elmouse, deplace, false);
document.getElementById('ombraelem').addEventListener(elmouse, selecte, false);
}

onload=init	
onmousemove=souris
</script>
</head>
<body onKeyDown="tourne(event)">
<br><br>
<div>
skew x: <input type='texte'id='skex'>
<br>
skew y: <input type='texte'id='skey'>
<br>
rotation: <input type='texte'id='rot'>
<br>
echelle: <input type='texte' id='sca' width='300'>
<br>
translation x: <input type='texte'id='tranx'>
<br>
translation y: <input type='texte'id='trany'>
</div>
<br><br>
<img src='avio.jpg' id='ombraelem' onmousedown='sp(event)' onmouseup='sp()'/>
</body>
</html>

Conclusion :


ludique
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)