.demo-container
  .button
    i.fa.fa-share-alt
    .fb.soc-but
      a.back(href = '#')
        i.fa.fa-facebook
    .tw.soc-but
      a.back(href = 'https://twitter.com/kiyutin_k' target='_blank')
        i.fa.fa-twitter
    .gp.soc-but
      a.back(href = '#')
        i.fa.fa-google-plus
    .vk.soc-but
      a.back(href = '#')
        i.fa.fa-vk
View Compiled
*, *:before, *:after
  box-sizing: border-box
  margin: 0
  padding: 0
.demo-container
  width: 100vw
  height: 100vh
  display: flex
  align-items: center
  justify-content: center
  background-image: radial-gradient(farthest-corner at 50%,  white, #67989A)
.button, .soc-but
  width: 7rem
  height: 7rem
.button
  background: #042037
  position: relative
  perspective: 300px
  display: flex
  align-items: center
  justify-content: center
  font-size: 4rem
  color: white
  &:hover .fb
    transform: rotateY(180deg)
  &:hover .tw
    transform: rotateY(-180deg)
  &:hover .gp
    transform: rotateX(180deg)
  &:hover .vk
    transform: rotateX(-180deg)
.soc-but
  position: absolute
  left: 0
  top: 0
  transition: transform 0.4s ease
  transform-style: preserve-3d
.back
  width: 100%
  height: 100%
  backface-visibility: hidden
  display: flex
  align-items: center
  justify-content: center
  font-size: 3.5rem
  color: white
  text-decoration: none
.vk .back, .gp .back
  transform: rotateX(180deg)
.tw .back, .fb .back
  transform: rotateY(180deg)
.fb .back
  background: #3b5998
.vk .back
  background: #45668e
.tw .back
  background: #00aced
.gp .back
  background: #dd4b39
.fb, .vk
  transform-origin: 0% 0%
.gp, .tw
  transform-origin: 100% 100%
.tw
  transition-delay: 0.1s
  transform: rotateY(-90deg)
.gp
  transition-delay: 0.2s
  transform: rotateX(90deg)
.vk
  transform: rotateX(-90deg)
.fb
  transition-delay: 0.3s
  transform: rotateY(90deg)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.