<!-- 
https://dribbble.com/shots/2252572-Day-083-Social-Connect
 -->

<div class="center">
	<div class="wrapper">
		<a href="https://dribbble.com/shots/2252572-Day-083-Social-Connect">
			<div class="container container--facebook">
				<div class="box box--left box--front">
					<i class="ion ion-social-facebook"></i>
					<span class="count">
						13 K				
					</span>
				</div>		
				<span class="follow follow--left">
					Like
				</span>
			</div>
		</a>

		<a href="https://dribbble.com/shots/2252572-Day-083-Social-Connect">
			<div class="container container--twitter">
				<div class="box box--middle">
					<i class="ion ion-social-twitter"></i>	
					<span class="count">
						10.5 K				
					</span>
				</div>
				<span class="follow follow--middle">
					Follow
				</span>
			</div>
		</a>


		<a href="https://dribbble.com/shots/2252572-Day-083-Social-Connect">
			<div class="container container--instagram">
				<div class="box box--right">
					<i class="ion ion-social-instagram"></i>
					<span class="count">
						11 K
					</span>
				</div>
				<span class="follow follow--right">
					Follow
				</span>
			</div>
		</a>

	</div>
</div>

<button id="stop" class="button" 
	title="Stops the animation from running">
	Stop
</button>
@import "bourbon"

// Colors
$facebook: #37508D
$twitter: #00A5EA
$instagram: #195484

$body__background-color: #ECEFF4

// The height of the boxes
$box-height: 220px
$box-width: 220px

// The box's spacing away from its container  
$spacing: 40px



body
	margin: 50px 0px
	font-family: Montserrat
	font-size: 1rem
	line-height: 1.25rem
	background-color: $body__background-color

a
	text-decoration: none
	display: block



.center
	display: flex
	align-items: center
	justify-content: center
	height: 70vh



.wrapper
	max-width: 780px
	margin: 0 auto
	display: flex






.container
	color: white
	background-color: white
	border-radius: 2px
	box-shadow: 0 35px 80px 7px rgba(black, 0.1)
	margin: 0 20px
	min-width: $box-width
	min-height: $box-height
	perspective: 1000px
	position: relative
	user-select: none

.container--facebook
	background-color: $facebook	

.container--twitter
	background-color: $twitter

.container--instagram
	background-color: $instagram





// Styles for the icons 
.ion
	position: absolute
	left: 50%
	top: 50%
	transform: translate(-50%, -50%)

.ion.ion-social-facebook
	color: $facebook

.ion.ion-social-twitter
	color: $twitter

.ion.ion-social-instagram
	color: $instagram





.box
	align-items: flex-end
	background-color: white
	box-shadow: 0 20px 60px 0px rgba(black, 0.08)
	border-radius: 2px
	color: white
	font-size: 2.25rem
	justify-content: center
	position: relative
	text-align: center
	transition: transform 0.8s
	transform-style: transform-3d
	perspective: 1000px
	+size($box-width $box-height)

	> *
		transition: transform 0.8s
		transform-style: transform-3d

.box--left
	transition: transform 0.8s
	
.box--middle
	transition: transform 0.4s $ease-out-quad

.box--right
	transition: transform 0.7s $ease-out-back





.container:hover, .active
	
	// Not sure how to achieve this in a better way
	// and not sure how to make the text not blurry 
	.box--left
		transform: translate(-$spacing, -$spacing) rotate(-90deg) rotateY(180deg)  

		.ion
			transform: rotate(270deg) rotateY(180deg) translate(-122%, -4%)
			
		.count
			transform: rotate(270deg) rotateY(180deg) translate(-200%, 200%) 


	.box--middle
		transform: translateY(-$spacing) 

	.box--right
		transform: translate($spacing, -$spacing)




// The follow count 
.count
	font-size: 14px
	color: rgba(black, 0.4)
	display: block
	font-weight: 400
	text-center: center
	position: absolute
	left: 50%
	top: 70%
	transform: translate(-50%, -50%)
	




.follow
	bottom: 0	
	color: white
	display: block
	font-size: 13px
	font-weight: 400
	letter-spacing: 0.5px
	text-transform: uppercase
	position: absolute
	
.follow--left
	right: 0
	transform: translate(-14px, -10px)

.follow--middle
	left: 50%
	transform: translate(-50%, -10px) 

.follow--right
	left: 0
	transform: translate(14px, -10px)





$button__background: rgba(white, 0.7)
$button__foreground: #555
$button__background--active: rgba(white, 0.7)
$button__font-size: 14px

.button
	background-color: $button__background
	border: 0
	box-shadow: 0 3px 6px 0 rgba(black, 0.08), 0 4px 12px 0 rgba(black, 0.08)
	border-radius: 3px
	color: $button__foreground
	cursor: pointer
	flex-wrap: nowrap
	font-size: rem($button__font-size)
	outline: 0
	padding: 10px 30px
	position: relative
	text-align: center
	display: block
	transition: box-shadow 0.15s, background-color 0.15s
	user-select: none
	vertical-align: middle

	&:active
		box-shadow: 0 2px 3px 0 rgba(black, 0.1), 0 2px 4px 0 rgba(black, 0.05)

View Compiled

var button = document.querySelector('#stop');
var shouldKeepAnimating = true;
var addClassTimeouts = [];
var containers = document.querySelectorAll('.container');
containers = Array.prototype.slice.call(containers, 0);

setTimeout(setActiveClasses, 500)

button.addEventListener('click', function () {
	shouldKeepAnimating = ! shouldKeepAnimating;
	
	if (shouldKeepAnimating) {
		this.textContent = 'Stop';
		setActiveClasses();
	} else {
		this.textContent = 'Start';
		addClassTimeouts.forEach(function (timeout) {
			clearTimeout(timeout);
		});
		clearActiveClasses();
	}
});

function setActiveClasses() {
	var time = 0;

	if ( ! shouldKeepAnimating) {
		return;
	}
	
	addClassTimeouts = [];
	
	containers
		.forEach(function (container) {
			
			time += 1000;
			var timeoutId= setTimeout(function () {
								
				container.classList.add('active')
			}, time);
			addClassTimeouts.push(timeoutId)
		});

	setTimeout(function () {
		clearActiveClasses();
		setTimeout(setActiveClasses, 2000);
	}, time + 2000)
}

function clearActiveClasses() {
	containers.forEach(function (container) {
		container.classList.remove('active');
	});
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.