michanismus

/**
 * How to make 3-corner-rounded triangle in CSS (SO)
 * http://stackoverflow.com/q/14446677/1397351
 */
.triangle, .triangle:before, .triangle:after { width: 4em; height: 4em; }
.triangle {
	overflow: hidden;
	position: relative;
	margin: 7em auto 0;
	border-radius: 20%;

michanismus

/**
 * css 3d animation, how? (SO)
 * http://stackoverflow.com/q/9812196/1397351
 */
body { perspective: 50em; }
.cube {
	position: relative;
	margin: 8em auto 0; /* centering */
	padding: 0; /* reset unordered list default */
	width: 16em; height: 16em; /* change block element default */

michanismus

/**
 * dual angled shadow (SO)
 */
body { padding: 5em; background: whitesmoke; }
.box {
	width: 20em; height: 6em;
	border: solid 1px #ccc;
	position: relative;
	background: white;
}

michanismus

/**
 * gradient
 */
html { overflow: hidden; font: 1.75em sans-serif; }
*:before, *:after { font-size: .65em; }
.centred, .centred:before, .centred:after {
	box-sizing: border-box; 
	position: absolute;
	top: 50%; left: 50%;
}

michanismus

/**
 * applying succesive transforms
 */
body { overflow: hidden; margin: 0; padding: 5em 0 0; text-align: center; }
.box {
	display: inline-block;
	position: relative;
	margin: 2em 4em;
	width: 8em; height: 8em;
	background: pink;

michanismus

/**
 * Rounded SIDE, not rounded corners (SO)
 * http://stackoverflow.com/q/14508148/1397351
 */
.box {
	width: 10em; height: 10em;
	border-radius: 0 0 50% 50% / 0 0 .75em .75em; 
	background: black;
}

michanismus

/**
 * Imageless 3d content boxes - is this possible? (SO) v2
 * http://stackoverflow.com/q/12133233/1397351
 * Emulate 3D effect for Chrome, Safari, Firefox, Opera, IE10/9/8
 * Shadows work in Chrome, Safari, Firefox, Opera, IE10/9
 */
body {
	margin: 0;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#165284', 
			endColorstr='#3672a4'); /* fallback for IE9/8 */

michanismus

/**
 * Planet rotating into space using 3D rotate transforms, not 2D skew :D 
 * like I used for the planetary system
 * https://developer.mozilla.org/en-US/demos/detail/planetary-system/launch
 */
.wrap {
	position: relative;
	margin: 1em auto 0;
	width: 32em; height: 32em;
	perspective: 16em;

michanismus

/**
 * Pure CSS Real Spinning Square Antiprism
 * http://en.wikipedia.org/wiki/Square_antiprism
 * get triangular faces using this method http://dabblet.com/gist/3805071
 * 
 * Related
 * -------
 * Pure CSS Real Spinning Truncated Cube http://dabblet.com/gist/4543683
 * Pure CSS Real Spinning Octahedron http://dabblet.com/gist/4540517
 * Pure CSS Real Spinning Cuboctahedron http://dabblet.com/gist/4548435

michanismus

/**
 * Pure CSS Real Spinning Rhombicuboctahedron
 * http://en.wikipedia.org/wiki/Small_rhombicuboctahedron
 * get triangular faces using this method http://dabblet.com/gist/3805071
 * 
 * Related
 * -------
 * Pure CSS Real Spinning Truncated Cube http://dabblet.com/gist/4543683
 * Pure CSS Real Spinning Octahedron http://dabblet.com/gist/4540517
 * Pure CSS Real Spinning Cuboctahedron http://dabblet.com/gist/4548435