Efeito CSS3 - Foursides

Essse tutorial é muito legal, é la do Great Help.
Ele se divide em 4 e muda a imagem, espero que vocês gostem :)

 Visualizem o efeito aqui: ••••

#twist{ background-image: url('LINK DA IMAGEM QUE COBRE'), url('http://static.tumblr.com/5dbytsa/Rf8mej57q/fundo2.png'), url('LINK DA IMAGEM QUE COBRE'), url('LINK DA IMAGEM QUE COBRE'), url('Imagem no hover'); background-repeat: no-repeat; background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0px 0px; -webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg); -o-transform:rotate(-90deg);-ms-transform:rotate(-90deg); transform:rotate(-90deg); -webkit-transition: background-position .6s ease-in-out, -webkit-transform .3s ease;-moz-transition: background-position .6s ease-in-out, -moz-transform .3s ease; -o-transition: background-position .6s ease-in-out, -o-transform .3s ease;-ms-transition: background-position .6s ease-in-out, -ms-transform .3s ease;transition: background-position .6s ease-in-out, transform .3s ease;} #twist:hover {background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0px 0px;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);} .hover{border-radius: 103030px;height: 200px; width: 200px;}

Para usa-lo use o código abaixo:

<div id="twist" class="hover"></div>

 Prontinho, Beijos ;*