3D Theme

dabblet.css

/**
 * 3D Theme
 */

body {
  font-family: sans-serif;
}

.option-list {
  counter-reset: options;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top: 50px;
}

.option-list label {
  counter-increment: options;
  postion: relative;
  display: block;
  height: 30px;
  width: 100%;
  margin: 10px 0;
}

.option-list input[type=radio] {
  display: none;
}

.option-list label > span {
  position: absolute;
  width: 100%;
  height: 30px;
  cursor: pointer;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-100px) rotateY(40deg);
  transform: translateZ(-100px) rotateY(40deg);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.face {
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
  display: block;
  padding: 0 5px;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: pre;
  border: solid 1px #507700;
  background: #72aa00;
}

.face--front {
  width: 100%;
  height: 30px;
  transform: rotateY(0deg) translateZ(15px);
}

.face--back {
  width: 100%;
  height: 30px;
  color: white;
  background: #00b7ea;
  transform: rotateX(180deg) translateZ(15px);
}

.face--right {
  height: 30px;
  width: 30px;
  transform: rotateY(90deg) translateZ(185px);
}

.face--left {
  height: 30px;
  width: 30px;
  transform: rotateY(-90deg) translateZ(15px);
}

.face--left:before {
  content: counter(options);
  display: block;
  line-height: 30px;
  text-align: center;
}

.face--top {
  width: 100%;
  height: 30px;
  background: #94dd00;
  -webkit-transform: rotateX(90deg) translateZ(15px);
  transform: rotateX(90deg) translateZ(15px);
}

.face--bottom {
  width: 100%;
  height: 30px;
  transform: rotateX(-90deg) translateZ(15px);
}

.option-list label > span:hover {
  transform: translateZ(-100px) rotateY(40deg) rotateX(-90deg);
}

.option-list input[type=radio]:checked + span {
  -webkit-transform: translateZ(-100px) rotateY(40deg) rotateX(-180deg);
  transform: translateZ(-100px) rotateY(40deg) rotateX(-180deg);
}

dabblet.html

<div class="option-list">
	<label>
		<input name="option" type="radio">
		<span>
			<span class="face face--front">Option 1</span>
			<span class="face face--back">Option 1</span>
			<span class="face face--right"></span>
			<span class="face face--left"></span>
			<span class="face face--top">Option 1</span>
			<span class="face face--bottom"></span>
		</span>
	</label>
	<label>
		<input name="option" type="radio">
		<span>
			<span class="face face--front">Option 2</span>
			<span class="face face--back">Option 2</span>
			<span class="face face--right"></span>
			<span class="face face--left"></span>
			<span class="face face--top">Option 2</span>
			<span class="face face--bottom"></span>
		</span>
	</label>
	<label>
		<input name="option" type="radio">
		<span>
			<span class="face face--front">Option Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis consequuntur explicabo harum ipsa iste laboriosam laborum natus numquam omnis porro quasi ratione repudiandae, sapiente, sint suscipit velit voluptatem!</span>
			<span class="face face--back">Option Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis consequuntur explicabo harum ipsa iste laboriosam laborum natus numquam omnis porro quasi ratione repudiandae, sapiente, sint suscipit velit voluptatem!</span>
			<span class="face face--right"></span>
			<span class="face face--left"></span>
			<span class="face face--top">Option Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis consequuntur explicabo harum ipsa iste laboriosam laborum natus numquam omnis porro quasi ratione repudiandae, sapiente, sint suscipit velit voluptatem!</span>
			<span class="face face--bottom"></span>
		</span>
	</label>
	<label>
		<input name="option" type="radio">
		<span>
			<span class="face face--front">Option 4</span>
			<span class="face face--back">Option 4</span>
			<span class="face face--right"></span>
			<span class="face face--left"></span>
			<span class="face face--top">Option 4</span>
			<span class="face face--bottom"></span>
		</span>
	</label>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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