CSS Level- 3 is voorzien van een " transformatie " methode die het aantal graden neemt als parameter en roteert inhoud , zoals tekst , door dat aantal graden . Vind CSS klasse te definiëren voor elke rotatiehoek en gebruik toestaat om tekst draaien veranderen van de CSS klasse waarin de inhoud van een label . Bijvoorbeeld , kunt u tekst animeren met behulp van de webbrowser " setInterval " methode om een rotatie- functie aan te roepen in een regelmatig tijdsinterval . Wat je nodig hebt
Een van deze browsers :
Firefox 3.5 of hoger
Safari 3.1 of hoger
Chrome 4.0 of hoger
Opera 10.5 of hoger
Internet Explorer 9.0 of hoger < br >
Toon Meer Aanwijzingen
1 Maak een nieuw HTML-document in Kladblok of een HTML-editor . Voer de HTML- headers in het document : < ! DOCTYPE HTML >
Roterende tekst <br> < /title > <br> 2 <p> Maak CSS styling voor het lichaam van het document te stel een marge en een groot lettertype voor de tekst te worden gedraaid : <p> <style> <p> lichaam <br> { margin : 60px ; font-family : Arial , Helvetica , sans - serif ; font - size : 36px ; } <br> 3 <p> Definieer CSS klassen op verschillende graden van rotatie. Geef de tekst in een blok , stel de positie te zijn "relatief ", stelt u de hoogte en breedte en ook de generieke en vendor - specifieke eigenschappen te transformeren om de tekst te roteren een bepaald aantal graden : . <br> <p> Rotation0 { display: block ; position: relative ; width : 200px ; height : 200px ; } <br> <p> rotation60 { weergave : . block ; position: relative ; width : 200px ; height : 200px ; - webkit - transform : rotate ( 60deg ) ; - moz - transform : rotate ( 60deg ) ; - ms - transform : rotate ( 60deg ) ; - o - transform : rotate ( 60deg ) ; transform : . draaien ( 60deg ) ; } <br> <p> rotation120 { weergave : block ; position: relative ; width : 200px ; height : 200px ; - webkit - transform : rotate ( 120deg ) ; - moz - transform : rotate ( 120deg ) ; - ms - transform : rotate ( 120deg ) ; - o - transform : roteren ( 120deg ) ; transform : rotate ( 120deg ) ; } <br> <p> rotation180 { display: block ; positie : . relatief; width : 200px ; height : 200px ; - webkit - transform : rotate (180 graden ) ; - moz - transform : rotate (180 graden ) ; - ms - transform : rotate (180 graden ) ; - o - transform : rotate (180 graden ) ; transform : rotate (180 graden ) ; } <br> <p> rotation240 { display: block ; positie . : relatieve ; width : 200px ; height : 200px ; - webkit - transform : rotate ( 240deg ) ; - moz - transform : rotate ( 240deg ) ; - ms - transform : rotate ( 240deg ) ; - o - transform : rotate ( 240deg ) , transform : rotate ( 240deg ) ; } <br> <p> rotation300 { weergave : . block ; position: relative ; width : 200px ; height : 200px ; - webkit - transform : rotate ( 300deg ) ; - moz - transform : roteren ( 300deg ) ; - ms - transform : rotate ( 300deg ) ; - o - transform : rotate ( 300deg ) ; transform : . rotate ( 300deg ) ; } <br> <p> rotation360 { display: block ; position: relative ; breedte : 200px ; height : 200px ; - webkit - transform : rotate ( 360 deg ) ; - moz - transform : rotate ( 360 deg ) ; - ms - transform : rotate ( 360 deg ) ; - o - transform : rotate ( 360 deg ) ; transform : draai ( 360 deg ) ; } <p> < /style > <br> 4 <p> Maak een JavaScript-functie tot de klasse van de tekst naar de volgende rotatie , of om opnieuw te beginnen bij nul als de volgende berekende rotatie groter is dan 360 graden . Initialiseren van een globale variabele aan de huidige graadomwenteling bijhouden : <p> <script> <br> <p> var omwenteling <br> = 0 ; <p> functie <br> draaien ( ) { <p> rotatie <br> = (rotatie 60 > 360 ) ? 0 : . Rotatie 60 ; <p> document.getElementById <br> ( " tekst" ) className = " rotatie " + rotatie ; <br> <p> } <br> 5 <p> Bel de webbrowser " <br> <p> < /script > < br ; : " ( draai ( ) " , 1000 ) setInterval <p> Window.setInterval <br> methode om de rotatie functie uit te voeren op een regelmatig tijdsinterval , in milliseconden " > <p> < /head > <br> 6 <p> Maak een <div> tag voor de tekst en wijs de eerste CSS-klasse . Voer de tekst te roteren binnen de <div> tag : <p> <body> <br> <p> <div id="text" class="rotation0"> ROTATING < /div > <br> <p> <br> < /body > <br> <p> < /html > <br> 7 <p> Sla het bestand op . Open deze met een browser en kijken naar de tekst roteren op het scherm . <br> <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/javascript-programming/201309/90939.html' >Hoe de Facebook JavaScript SDK installeren </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/javascript-programming/201309/90941.html' >Hoe te JSON gegevens met JavaScript Output </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>JavaScript Programmeren</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91261.html" title="Hoe je Javascript inschakelen Debuggen " target="_self">Hoe je Javascript inschakelen …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90942.html" title="Hoe maak je een Div draaien in JavaScript " target="_self">Hoe maak je een Div draaien in…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90904.html" title="Hoe te Bel een iFrame Via een formulier " target="_self">Hoe te Bel een iFrame Via een …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91273.html" title="Wat is JavaScript gebruikt? " target="_self">Wat is JavaScript gebruikt? </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91040.html" title="Hoe kan ik HTML Text Maak Vanaf Javascript Variable " target="_self">Hoe kan ik HTML Text Maak Vana…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91251.html" title="Hoe te vermijden Javascript Void " target="_self">Hoe te vermijden Javascript Vo…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90994.html" title="Hoe je externe JS in JavaScript Include " target="_self">Hoe je externe JS in JavaScrip…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91223.html" title="Hoe te wijzigen Tekengrootte in Java Script " target="_self">Hoe te wijzigen Tekengrootte i…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91276.html" title="Hoe de post Voeg toe aan Facebook Button naar uw website " target="_self">Hoe de post Voeg toe aan Faceb…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95307.html" title="Hoe de zaak van de letters wijzigen in Visual Basic " target="_self">Hoe de zaak van de letters wijzigen in V…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87140.html" title="Hoe je speciale tekens te verwijderen in ColdFusion " target="_self">Hoe je speciale tekens te verwijderen in…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/92395.html" title="Hoe maak je een Veld bijwerken in MySQL " target="_self">Hoe maak je een Veld bijwerken in MySQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87292.html" title="Hoe maak je een script Run in Lua " target="_self">Hoe maak je een script Run in Lua </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/92824.html" title="Hoe vindt u de Datum voor Elke vrijdag van het Jaar Met behulp van PHP " target="_self">Hoe vindt u de Datum voor Elke vrijdag v…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/96451.html" title="Hoe maak je grafieken maken met Visual Basic " target="_self">Hoe maak je grafieken maken met Visual B…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90850.html" title="Ondoorzichtigheid Effecten in MooTools " target="_self">Ondoorzichtigheid Effecten in MooTools </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/cc-programming/201309/86017.html" title="Hoe te Debug met DBX " target="_self">Hoe te Debug met DBX </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/python-programming/201309/93478.html" title="Hoe controleert de Exact Match Dictionary in Python " target="_self">Hoe controleert de Exact Match Dictionar…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
