Untitled

dabblet.css

body { background: #666 }

.flower,
.flower > *,
.flower > * > * {
	-webkit-user-select: none;

	display: block;
	margin: 0;
	padding: 0
}

.flower {
	background: #000;
	margin: 100px auto;
	width: 320px;

	height: 480px;
	overflow: hidden;
	position: relative
}

.flower > *,
.flower > * > * {
	left: 0;
	position: absolute;
	/*right: 0;*/
	top: 0;
	width: 100%
}

.flower > * {
	list-style: none;

	height: 400%;

	-webkit-transform: translateZ(0);
	-webkit-transform-origin: 50% 50%;
	-webkit-transition: -webkit-transform .75s ease-in-out
}

.flower > * > * {
	background: #fff;
	-webkit-background-size: cover;
	-webkit-border-radius: 10px;
	-webkit-box-sizing: border-box;

	height: 25%;

	-webkit-transform-origin: 50% 200%
}

.flower > * > *:nth-child(1) {
	background-image: url(http://prtl.uhcl.edu/portal/pls/portal/docs/1/2141239.JPG);

	-webkit-transform: rotate(0deg)
}

.flower > * > *:nth-child(2) {
	background-image: url(http://media-cdn.tripadvisor.com/media/photo-s/02/b3/25/5d/roots-travel-tours.jpg);

	-webkit-transform: rotate(45deg)
}

.flower > * > *:nth-child(3) {
	background-image: url(http://kctravel.it/wp-content/uploads/2008/11/group-travel.jpg);

	-webkit-transform: rotate(90deg)
}

.flower > * > *:nth-child(4) { -webkit-transform: rotate(135deg) }
.flower > * > *:nth-child(5) { -webkit-transform: rotate(180deg) }
.flower > * > *:nth-child(6) { -webkit-transform: rotate(225deg) }
.flower > * > *:nth-child(7) { -webkit-transform: rotate(270deg) }
.flower > * > *:nth-child(8) { -webkit-transform: rotate(315deg) }

.flower:hover > * { -webkit-transform: rotate(-90deg) }

dabblet.html

<div class="flower">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</div>

dabblet.js

document.querySelectorAll(".flower")[0].ontouchstart = function () {};

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}