CSS Nivel 3 incluye un método de " transformación " que lleva el número de grados como parámetro y gira contenido, como texto, por ese número de grados. Puede definir una clase CSS para cada grado de rotación y el uso de JavaScript para girar texto cambiando la clase CSS asignado al contenido de una etiqueta . Por ejemplo , puede animar texto con el método de JavaScript " setInterval " para llamar a una función de rotación en un intervalo de tiempo regular. Cosas que necesitará sobre One de estos navegadores :
Firefox 3.5 o superior
Safari 3.1 o superior
Chrome 4.0 o superior
Opera 10.5 o superior
Internet Explorer 9.0 o superior
Ver Más instrucciones
1
Crear un nuevo documento HTML con el Bloc de notas o un editor HTML. Introduzca los encabezados de HTML en el documento :
< p>
Rotación texto < /title> <br> 2 <p> Crear un estilo CSS para el cuerpo del documento para establecer un margen y un tamaño de fuente para el texto que desea girar : <br> <p> <style> <br> <p> body {margin : 60px ; font- family: Arial , Helvetica , sans- serif; fuente -size: 36px ;} <br> 3 <p> Definir clases CSS en diferentes grados de rotación. Muestra el texto de un bloque , establezca la posición de ser " relativa", establece la altura y la anchura , e incluyen los genéricos y específicos del fabricante propiedades de transformación para rotar el texto de un cierto número de grados : . <br> <p> Rotation0 { display : block; position: relative ; ancho : 200px ; altura : 200px ;} <br> <p> rotación60 {display : . bloque ; position: relative ; ancho : 200px ; altura : 200px ; - webkit- transform: rotate ( 60deg ) -moz -transform : rotate ( 60 grados ) ; -ms- transform: rotate ( 60 grados ), -o- transform: rotate ( 60 grados ) ; transform: . rote ( 60 grados ) ;} <br> <p> rotation120 {display : block; position: relative ; ancho : 200px ; altura : 200px ; - webkit- transform: rotate ( 120deg ) -moz -transform : rotate ( 120deg ) -ms- transform: rotate ( 120deg ) -o- transform: rotación ( 120deg ) ; transform: rotate ( 120deg ) ;} <br> <p> rotation180 {display : block; posición : . relativa; ancho : 200px ; altura : 200px ; - webkit- transform: rotate (180 grados ) ; -moz -transform : rotación (180 grados ) ; -ms- transform: rotación (180 grados ), -o- transform: rotación (180 grados ) ; transform: rotación (180 grados ) ;} <br> <p> rotation240 {display : block; posición. : relative; ancho : 200px ; altura : 200px ; - webkit- transform: rotate ( 240deg ) -moz -transform : rotate ( 240deg ) -ms- transform: rotate ( 240deg ) -o- transform: rotate ( 240deg ) ; transform: rotate ( 240deg ) ;} <br> <p> rotation300 {display : . bloque ; position: relative ; ancho : 200px ; altura : 200px ; - webkit- transform: rotate ( 300deg ) -moz -transform : girar ( 300deg ) -ms- transform: rotate ( 300deg ) -o- transform: rotate ( 300deg ) ; transform: . rotate ( 300deg ) ;} <br> <p> rotation360 {display : block; position: relative ; ancho : 200px , alto: 200px ; - webkit- transform: rotate ( 360deg ) -moz -transform : rotate ( 360deg ) -ms- transform: rotate ( 360deg ) -o- transform: rotate ( 360deg ) ; transform: girar ( 360deg ) ;} <br> <p> < /style> <br> 4 <p> Crear una función de JavaScript para cambiar la clase del texto a la siguiente rotación, o para volver a empezar de cero si el siguiente rotación calculada es mayor que 360 grados . Iniciar una variable global para seguir el actual grado de rotación : <br> <p> <script> <br> <p> rotación var = 0 ; <br> función <p> girar () { <br> rotación <p> = (rotación 60 > 360 ) ? 0 : . Rotación 60 ; <br> <p> document.getElementById ( "text ") className = "rotación" + rotación; <br> <p> } <br> 5 <p> Llame al JavaScript " " método para ejecutar la función de rotación en un intervalo de tiempo regular , se especifica en milisegundos : <br> <p> window.setInterval setInterval ( " girar () " , 1000) ; <br> <p> < /script> <br> <p> < /head> <br> 6 <p> Crear una etiqueta <div> para el texto y asignarle la primera clase CSS. Introduzca el texto que desea girar dentro de la etiqueta <div> : <br> <p> <body> <br> <p> <div id="text" class="rotation0"> ROTATING < /div > <br> <p> < /body> <br> <p> < /html> <br> 7 <p> Guarde el archivo . Abra con un navegador y ver el texto gira en la pantalla . <br> <br>
<div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div>
</div>
<div class=contentpage>
<div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-instalar-el-Facebook-JavaScript-SDK-.html' >Cómo instalar el Facebook JavaScript SDK </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Acerca-de-la-salida-de-datos-JSON-con-JavaScript-.html' >Acerca de la salida de datos JSON con JavaScript </a> </div>
</div>
<dl class=xgc>
<dt><span>JavaScript Programación</span></dt>
<dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-actualizar-PHP-Uso-de-Javascript-.html">Cómo actualizar PHP Uso de Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-quitar-la-barra-de-direcciones-con-JavaScript-.html">Cómo quitar la barra de direcciones con JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Los-riesgos-con-JavaScript-.html">Los riesgos con JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-Activar-Div-con-javascript-.html">Cómo Activar Div con javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-un-Google-Map-Overlay-.html">Cómo hacer un Google Map Overlay </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/OnMouseOver-Styles-.html">OnMouseOver Styles </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-convertir-de-cadena-a-entero-en-Javascript-.html">Cómo convertir de cadena a entero en Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-una-imagen-de-JavaScript-Rollover-.html">Cómo hacer una imagen de JavaScript Rollover </a></dd>
</dl>
</div>
<!--right-->
<div class=rightmain>
<div class=esrightlist>
<div class=e1>Los últimos artículos de equipo</div>
<ul>
<li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-girar-Enlaces-en-JavaScript-.html" >Cómo girar Enlaces en JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-el-API-de-Google-Maps-distancia-de-radio-.html" >Cómo utilizar el API de Google Maps distancia de radio </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-reemplazar-un-IFrame-en-JavaScript-.html" >Cómo reemplazar un IFrame en JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-reemplazar-los-códigos-Div-.html" >Cómo reemplazar los códigos Div </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-actualizar-PHP-Uso-de-Javascript-.html" >Cómo actualizar PHP Uso de Javascript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-Float-con-JavaScript-.html" >Cómo agregar Float con JavaScript </a> </li>
</ul>
</div>
<div class=esrightlist>
<div class=e1>Artículos de la popular computadora</div>
<ul>
<li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cargar-un-DIV-en-Otro-DIV-dinámica-.html" >Cómo cargar un DIV en Otro DIV dinámica </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-comprobar-si-el-ratón-está-sobre-DIV-en-JavaScript-.html" >Cómo comprobar si el ratón está sobre DIV en JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-girar-una-cotización-en-JavaScript-.html" >Cómo girar una cotización en JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-texto-basado-Browser-Games-.html" >Cómo crear texto basado Browser Games </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-actualizar-DIV-.html" >Cómo actualizar DIV </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-mantener-el-Prototype-JS-Hasta-Fecha-.html" >Cómo mantener el Prototype JS Hasta Fecha </a></li>
</ul>
</div>
<div class="esrightad">
<script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script>
</div>
<div class=esrightlist>
<div class=e1>Más categorías</div>
<ul>
<li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li>
<li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li>
<li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li>
</ul>
</div>
</div>
<!--right end-->
<div class="cl"></div>
</div>
<div class=esfoot>
<div class=copy>Conocimientos Informáticos © http://www.ordenador.online</div>
</div>
</body>
</html> 