.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.