Olá lindas pessoas
Sabem a playlist que eu coloquei no último post que fiz? O tutorial de hoje é de como criar uma! É bem simples e rápido,e é tudo ao seu gosto!
Querem aprender?? Let's Go

#spit{
display: inline-block;
margin-left: 15px;
background-image: url('http://static.tumblr.com/sxeyvs3/7F5mf87po/1.png'), url('http://static.tumblr.com/sxeyvs3/34bmf87q1/2.png'), url('http://25.media.tumblr.com/fdf4a1e6de6ad20af51276ce03f82019/tumblr_mf53u8DPTn1rxdy7io1_250.png');
background-repeat: no-repeat; background-position: 0px; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;
background-position: -100px 0px, 100px 0px, 0px 0px;
}
#spit:hover {background-position: -100px 200px, 100px -200px, 0px 0px;
-webkit-transform: rotate(360deg);
}
.hover{border-radius: 100px;height: 200px; width: 200px;}
<div id="spit" class="hover"></div>


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;}
Prontinho, Beijos ;*<div id="twist" class="hover"></div>