begin process at 2012 05 28 13:17:52
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Tutoriaux

 > CSS3 TRANSFORM

CSS3 TRANSFORM


 Information sur la source

Note :
Aucune note
Catégorie :Tutoriaux Classé sous :css3, transform, rotation, echelle, translation Niveau :Débutant Date de création :13/04/2010 Date de mise à jour :16/04/2010 15:28:21 Vu / téléchargé :5 202 / 225
Auteur : kazma

Ecrire un message privé
Commentaire sur cette source (0)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • <!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> 
<!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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

14 avril 2010 21:43:34 :
ajout d'une fonction pour pouvoir deplacer l'image avec la souris (drag) et modif pour opera afin que les valeurs soient en degre car opera les donnes en radian
15 avril 2010 14:28:35 :
nettoyage
16 avril 2010 15:28:22 :
pourquoi faire compliquer quand on peut faire simple

 Sources du même auteur

Source avec Zip Source avec une capture BOUTON ROTATIF
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D
Toutes les sources de kazma

 Sources de la même categorie

Source avec Zip POUR LES DÉBUTANTS EN JAVASCRIPT par lecurieux41
CALCULER LA DISTANCE ENTRE DEUX ADRESSES DE FORMULAIRE GRÂCE... par nebenobo
Source avec Zip RÉCEPTION DE SMS EN JAVASCRIPT par hhoareau
APPELER, UN NUMÉRO DE TÉLÉPHONE GRÂCE À UNE ICÔNE SUR L'ÉCRA... par Rainbow
Source avec Zip FAIRE UN CV EN HTML VIA XML ET DU XSL par antour
Toutes les sources de la catégorie Tutoriaux

 Sources en rapport avec celle ci

Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip Source avec une capture DIAPO EN CSS 3D par kazma
Source avec Zip Source avec une capture EFFET DE TEXTE EN CSS3 par kazma
Source avec Zip Source avec une capture TRANSFORMATIONS CSS ANIMÉES CROSS-BROWSER AVEC JQUERY par pysco68

Commentaires et avis

Aucun commentaire pour le moment.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

creation rotation verticale avec images et textes [ par salimz ] Bonjour,Je cherche un code me permettant de faire une rotation verticale continue avec 6 images sur la droite et du texte à gauche de chaque image.La Faire une ROTATION d'une image avec HTML ou JAVASCRIPT ? [ par maxxcbenny ] Bonjour,Quelqu'un connait-il le moyen de faire subir une rotation à une image dans un navigateur web ? Avec un angle libre de 0° à 360° évidement ?Par formulaire avec choix d echelle de couleur [ par gabs77 ] je cherche a faire&nbsp;un script pour affect&#233;, a une couleur, une valeur entre 1 et 5 qui qualifiera un degre d importance, voir le script ci de comment manipuler une image ? (deplacement + rotation) [ par franco_se ] bonjours je voudrais savoir comment faire pour manipuler une image, a savoir la deplacer, et lui appliquer une rotation. Mon but étant en fait de depl rotation d'image [ par WebInitiation ] Bonjour j'ai un petit soucis.En fait ce que je voudrais faire c'est afficher un logo portable sur mon site.(Un roulement).Pour ce faire j'ai essayer p Rotation de banniere jscript [ par Lamap ] Bonjour,J'ai un script de type : &lt;script language="javascript"    src="http://www.pub.com/cpm.php?eid=1395551846&amp;tbn=1"&gt; &lt;/script&gt;Je c rotation de bannieres [ par 18carats ] bonjour,je possede un site web et j'aimerai inserer un javascript sur quelques unes de mes pages afin d'inserer une banniere qui change toutes les 30 pourquoi on utilise xhtml1.0 et pas 1.1 ? css3 et pas css2 [ par sikove ] salut, une question que je posais tout le temps : pourquoi actuellement on utilise xhtml1.0  (strict) et pas xhtml1.1 ? css3 et pas css2 ? meme lorsqu Rotation d'un texte à 80° [ par jytest ] Bonjour à tous. Je voudrais incliner un texte à 80°... Vu qu'il est apparemment impossible de le faire en css, comment le faire ? J'ai lu que ma sol


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,652 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)