Con CSS 3.0 sarà possibile ruotare/traslare gli elementi di una pagina

CSS 3.0 permetterà di applicare delle (rotazioni/traslazioni) sugli elementi delle pagine Web. La cosa probabilmente è, per il momento, solamente un giochetto, ma nel futuro credo si possano aprire molte possibilità per gli webmaster, magari si potranno creare delle animazioni usando solamente Javascript e modificatori CSS.

Questo è un video, di Aza Raskin, dove viene mostrato come creare un comando per alterare le pagine eseguendo rotazioni e traslazioni varie:


Ubiquity Tutorial: Turn a page upside-down from Aza Raskin on Vimeo.

Chi avesse Ubiquity può provare con questo codice: (copiato dal video)

CmdUtils.CreateCommand({
  name: "ruota",
  takes: {degrees:noun_arb_text},
  execute: function(degrees){
	var doc = CmdUtils.getDocument();
	jQuery(doc.body).css("-moz-transform", "rotate("+degrees.text+"deg)");
  },
  preview: function(pblock,degrees){
  pblock.innerHTML="Ruota la pagina di "+degrees.text+" gradi";
  }
  });
CmdUtils.CreateCommand({
  name: "flip",
  execute: function(){
	var doc = CmdUtils.getDocument();
	jQuery(doc.body).css("-moz-transform", "rotate(90deg)");
  },
  preview: function(pblock){
  pblock.innerHTML="rotate the page";
  }
  });

Naturalmente, essendo molto rozza non è previsto un noun_type per i gradi, inserendo qualcosa diverso da un numero potrebbero esserci strani effetti. Per vedere cosa succede provare con ruota 90 o ruota 180 e poi appendersi al soffitto a testa in giù :-P. Ecco come appare Google dando il comando ruota 15:

Homepage di Google ruotata di 15 gradi

Chi non dispone di Ubiquity ma ha Firefox 3.1, può provare cliccando su questi due link:

AGGIORNAMENTO: ho aggiunto il codice per Webkit, non avendo una nightly di Safari per provare non so se funziona o meno. Se qualcuno passa di qui con una nightly di Webkit può lasciare un commento 🙂

Non credo che provando con altri browser accada nulla, in quanto quella proprietà ha il prefisso -moz, anche se le ultime versioni di WebKit dovrebbero supportare questa specifica CSS (probabilmente si chiamerà webkit-transfrom).

Fonte: Aza’s Thoughts

Technorati Tags: , ,

5 Responses to “Con CSS 3.0 sarà possibile ruotare/traslare gli elementi di una pagina”


  • Google Chrome 1.0.154.36 Windows XP

    Con Chrome la funzione “Rovescia Testata” funziona.

  • Safari 525.27.1 Mac OS X 10.5.6

    Anche su Safari l’ultimo comando funziona!

  • Mozilla Firefox 3.1b2 Windows XP

    Willy,
    grazie mille 😀
    Però è scomodo che la proprietà sia diversa a seconda del browser in uso. Speriamo che a breve diventi una specifica ufficiale (come anche gli angoli arrotondati) e si possa usare tranquillamente il transform anzichè i pseudo -moz-transform e -webkit-transform.
    Ciao
    PS: ho provato anch’io con Chrome e funziona, nemmeno è necessaria una nightly 🙂

  • Mozilla Firefox 3.0.5 Windows XP

    Sinceramente non trovo la cosa molto utile adesso come adesso.

    Però è anche vero che queste funzioni apparentemente superflue alle volte possono rivelarsi determinanti nel successo di un sito internet. Boh… staremo a vedere 🙂

  • Mozilla Firefox 3.1b2 Windows XP

    Ciao Enrico e grazie di aver commentato.
    Beh, ora come ora questa proprietà dei CSS è inusabile nella pratica, sarebbero troppi gli utenti che non vedrebbero un bel niente.
    Non so se potrà servire o meno, ma credo che si potranno fare delle belle animazioni. Naturalmente starà alla fantasia degli Webmaster farci qualcosa di buono 🙂
    io volevo far girare la prima lettera del titolo, però FF non supporta – ancora – la rotazione di un elemento usando come fulcro di rotazione il centro dell’elemento stesso, mi pare che Webkit invece la supporti, comunque magari a qualcun’altro verranno in mente cose più interessanti.

    Ciao

Leave a Reply