<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <style type="text/css"> #mondiv { top: 300; left: 300; width: 400px; height:400px; border: 3px solid #000; margin:auto; } .class1 { background-color:red; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; } .class2{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); background-color:black; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; } .class3{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); background-color:black; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; } .class4{ -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); background-color:black; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; } .class5{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); background-color:black; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; } .class6{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); background-color:black; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; } </style> <script type="text/javascript" language="JavaScript"> function fct(chiffre){ var elem= document.getElementById('mondiv') switch (chiffre) { case 1: elem.className = "class1"; break; case 2: elem.className = "class2"; break; case 3: elem.className = "class3"; break; case 4: elem.className = "class4"; break; case 5: elem.className = "class5"; break; case 6: elem.className = "class6"; break; } } </script> </head> transition CSS3 blabla bloblo blabla bloblo blabla bloblo </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <style type="text/css"> #mondiv { position: absolute; top: 300; left: 300; width: 400px; height:400px; border: 3px solid #000; } .class1 { background-color:red; -webkit-transition-property: background-color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; } .class2{ background-color:black; -webkit-transition-property: background-color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; } </style> <script type="text/javascript" language="JavaScript"> function fct(){ if(document.getElementById('mondiv').className== "class2"){ document.getElementById('mondiv').className = "class1"; } else{ document.getElementById('mondiv').className = "class2"; } } </script> </head> transition CSS3 blabla </html>
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="bouton_rotatif.css" /> </head> <script> function changement_classe(chiffre) { var image=document.getElementById('image'); switch(chiffre) { case 1: image.className = "haut"; break; case 2: image.className = "gauche"; break; case 3: image.className = "bas"; break; } } </script> [ LIEN1] [ LIEN2] [ LIEN3] </html>
img { margin: 200px; } #LIEN3 { position: absolute; left: 270px; top: 480px; } #LIEN1 { position: absolute; left: 270px; top: 140px; } #LIEN2 { position: absolute; top: 280px; } .haut{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; } .gauche{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; } .bas{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <style type="text/css"> #mondiv { width: 400px; height:400px; border: 3px solid #000; margin:auto; } .class1 { background-color:red; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-out; -o-transition-property: -o-transform; -o-transition-duration: 1s; -o-transition-timing-function: ease-out; transition-property: -o-transform; transition-duration: 1s; transition-timing-function: ease-out; } </style> <script type="text/javascript" language="JavaScript"> function fct(chiffre){ var elem= document.getElementById('mondiv') var angle switch (chiffre) { case 1: angle=0 break; case 2: angle=90 break; case 3: angle=180 break; case 4: angle=270 break; case 5: angle=360 break; case 6: angle=360 break; } var effet='rotate('+angle+'deg)'; elem.style.WebkitTransform=effet; elem.style.OTransform=effet; elem.style.MozTransform=effet; elem.style.msTransform=effet; elem.style.transform=effet; } </script> </head> transition CSS3 blabla bloblo blabla bloblo blabla bloblo </html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question