HTML+CSS鼠标悬停效果

<link href="style.css" rel="stylesheet"><a class="social" href="https://webbb.be" target="_blank"> ????<div class="front"> ???????<i class="fa fa-facebook"></i> ????</div> ????<div class="back"> ???????<i class="fa fa-facebook"></i> ????</div></a><a class="social social-twitter" href="https://webbb.be" target="_blank"> ????<div class="front"> ???????<i class="fa fa-twitter"></i> ????</div> ????<div class="back"> ???????<i class="fa fa-twitter"></i> ????</div></a><a class="social social-github" href="https://webbb.be" target="_blank"> ????<div class="front"> ???????<i class="fa fa-github"></i> ????</div> ????<div class="back"> ???????<i class="fa fa-github"></i> ????</div></a><a class="social social-pinterest" href="https://webbb.be" target="_blank"> ????<div class="front"> ???????<i class="fa fa-pinterest"></i> ????</div> ????<div class="back"> ???????<i class="fa fa-pinterest"></i> ????</div></a><a class="social social-googleplus" href="https://webbb.be" target="_blank"> ????<div class="front"> ???????<i class="fa fa-google-plus"></i> ????</div> ????<div class="back"> ???????<i class="fa fa-google-plus"></i> ????</div></a><a class="social social-skype" href="https://webbb.be" target="_blank"> ????<div class="front"> ???????<i class="fa fa-skype"></i> ????</div> ????<div class="back"> ???????<i class="fa fa-skype"></i> ????</div></a><a class="social social-linkedin" href="https://webbb.be" target="_blank"> ????<div class="front"> ???????<i class="fa fa-linkedin"></i> ????</div> ????<div class="back"> ???????<i class="fa fa-linkedin"></i> ????</div></a><a class="social social-skype" href="https://webbb.be" target="_blank"> ????<div class="front"> ???????<i class="fa fa-skype"></i> ????</div> ????<div class="back"> ???????<i class="fa fa-skype"></i> ????</div></a><a class="social social-dribbble" href="https://webbb.be" target="_blank"> ????<div class="front"> ???????<i class="fa fa-dribbble"></i> ????</div> ????<div class="back"> ???????<i class="fa fa-dribbble"></i> ????</div></a>

/** * CSS3 social icon hover effect * Read more on my blog: http://webbb.be/blog/ */body { ???background: #f06; ???background: linear-gradient(45deg, #f06, yellow); ???min-height: 100%;}a,a:visited { color: #fff; }a:hover { color: #fff; }.social { ???float: left; ???margin: 2em 2em; width: 100px; height: 100px; ????????display: block; text-align: center; line-height:103px; color: #fff; ???????position: relative; ???transform:rotateY(0deg); ???transition:transform .25s ease-out; ???transform-style:preserve-3d;}.social > div { ???width: 100px; height: 100px; background: #000; ???position: absolute; top: 0; left: 0; right: 0; bottom: 0;}.social >.front { ???transform:translateZ(40px);}.social >.back { ???background: #3B5998; font-size: 3em; ???transform:rotateY(-100deg) translateZ(40px);}/* ?Social Media Colors ????Facebook #3B5998 ???Flickr #FE0883 ???Foursquare #8FD400 ???Google+ #C63D2D ???Instagram #4E433C ???Linkedin #4875B4 ???Tumblr #2B4964 ???Twitter #33CCFF ???Vimeo #86B32D ???Youtube #FF3333 ???Dribbble #ea4c89*/.social.social-twitter > .back { background: #55ACEE; }.social.social-github > .back { background: #f3f3f3; color: #000; }.social.social-pinterest > .back { background: #e3262e; }.social.social-googleplus > .back { background: #dd4B39; }.social.social-skype > .back { background: #12A5F4; }.social.social-linkedin > .back { background: #4875B4; }.social.social-dribbble > .back { background: #ea4c89; }/* Hover */.social:hover { ???transform: rotateY(100deg);}