React RCS (live styling demo)

RCS is a project i have been tinkering with lately, and this is a good demonstration of its features.

by icodeforlove

HTML

<script src="http://fb.me/react-with-addons-0.11.0-rc1.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0-rc1.js"></script>
<script src="https://rawgit.com/beautify-web/js-beautify/master/js/lib/beautify-css.js"></script>
<script src="https://rawgit.com/beautify-web/js-beautify/master/js/lib/beautify-html.js"></script>
<script src="https://rawgit.com/icodeforlove/react-rcs-example/master/rcs.settings.js"></script>
<script src="https://rawgit.com/icodeforlove/react-rcs-bower/master/rcs-with-transformer.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/icodeforlove/208b7e9f3e6c0912982f/raw/49a1ae9a2a5af36cf38ea46fecf5953d57d090ae/react-js-harmony-fiddle-integration.js"></script>

CSS

</style><!-- jsfiddle hack: allows custom tag --><style type="text/rcs">
@component Cube {
	view {
		position: absolute;
		left: 0;
		top: 0;
		height: 100;
		width: 100;
		transform-style: preserve-3d;
		transition: opacity .2s linear 0s;
		cursor: pointer;
		backface-visibility: hidden;
		 
		:::disabled {
			opacity: .4;
			
			:hover {
				opacity: .75;
				animation: none;
			}
		}
	}
	
	view > div {
		position: absolute;
		width: 100;
		height: 100;
	}

	.left {
		background-color: #cc4310;
		transform: rotateY(270deg) translateX(-50px);
		transform-origin: center left;
		backface-visibility: hidden;
		
		:::animated {
			background-color: #d6ad07;
		}
		
		:::front {
			background-color: #9114c9;
		}
	}
	
	.top {
		background-color: #f76d3f;
		transform: rotateX(-90deg) translateY(-50px);
		transform-origin: top center;
		
		:::animated {
			background-color: #f9d43d;
		}
		
		:::front {
			background-color: #ba49ed;
		}
	}
	
	.front {
		backface-visibility: hidden;
		background-color: #912208;
		transform: translateZ(50px);
		
		:::animated {
			background-color: #947805;
		}
		
		:::front {
			background-color: #640e8b;
		}
	}
	
	@keyframes pulse {
		0% {
			opacity: 1;
		}
		
		100% {
			opacity: .6;
		}
	}
}
@component CubeWorld {
	view {
		perspective: 1400px;
		perspective-origin: 50% 50%;
		position: relative;
		height: 500;
		width: 500;
		margin: 0 auto;
		padding-top: 320;
		transform-style: preserve-3d;
		transform-origin: 50% 0;
		transform: scale(.2);
	}
    
    @media screen and ( min-height: 600px ) {
        view {
            transform: scale(.5);
        }
    }

	.cube {
		transform-style: preserve-3d;
		position: absolute;
	}

	.animated-cube0 {
		animation: walk 13s infinite;
	}
	
	.animated-cube1 {
		animation: walk 13s 3.25s infinite;
	}
	
	.animated-cube2 {
		animation: walk 13s 6.5s infinite;
	}
	
	.animated-cube3 {
		animation: walk 13s 9.75s infinite;
	}
	
	@keyframes walk {
		0% {
			 transform: rotateX(-35deg) rotateY(45deg)...

JavaScript 1.7

/** @jsx React.DOM */

var Cube = React.createClass({
  getInitialState: function () {
	return {disabled: false};
  },
  
  onClick: function () {
	  this.setState({disabled: !this.state.disabled});
  },
  
  render: function() {
	return <div classes={React.addons.classSet({
		':::animated': this.props.type === 'animated-cube',
		':::front': this.props.type === 'front-cube',
		':::disabled': this.state.disabled
	})} onClick={this.onClick}>
		<div classes="front"></div>
		<div classes="top"></div>
		<div classes="left"></div>
	</div>
  }
});

var CubeWorld = React.createClass({
	renderCubes: function (positions, type) {
		return positions.map(function (position, index) {
			var transform = 'rotateX(-35deg) rotateY(45deg) translate3d(' + position.x + 'px,' + position.y + 'px, ' + position.z + 'px)';

			return <div style={{
				'-webkit-transform': transform,
				transform: transform,
				zIndex: position.zIndex
			}} classes={'cube ' + type + index} key={type + ':' + index}>
				<Cube type={type} />
			</div>;
		});
	},

  render: function() {  
	// zIndex's are for FireFox
  
	return <div>
		{this.renderCubes([
			{x: 100, y: 0, z: 0},
			{x: 200, y: 0, z: 0, zIndex: -1},
			{x: 300, y: 0, z: 0, zIndex: -2},
			{x: 200, y: -100, z: 100, zIndex: 30},
			{x: 300, y: 0, z: 100, zIndex: -1},
			{x: 300, y: 0, z: 200},
			
			{x: 100, y: -200, z: 100, zIndex: 30},
			{x: 200, y: -200, z: 100, zIndex: 20},
			{x: 200, y: -200, z: 0, zIndex: 10},
			{x: 200, y: -200, z: 200, zIndex: 30},
			{x: 300, y: -200, z: 100, zIndex: 10},
				   
			{x: 0, y: 0, z: 0},
			{x: 100, y: 0, z: 100},
			{x: 200, y: 0, z: 200},
			{x: 300, y: 0, z: 300},

			{x: 0, y: 100, z: 100},
			{x: 100, y: 100, z: 200},
			{x: 200, y: 100, z: 300},

			{x: 0, y: 200, z: 200},
			{x: 100, y: 200, z: 300},

			{x: 0, y: 300, z: 300}      
		], 'cube')}

		{this.renderCubes([
			{x: 100, y: 0, z: 200, zIndex: 10}
		], 'front-cube')}
		
		{this.renderCubes([
			{x: 0, y: -100, z: 0, zIndex:...