LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS3 Transition/Animation Test

settings

animations
transition
1
2
3
4
5
6
CSS
html, body {
	height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  cursor: default;
}

body {
	background: -webkit-gradient(
		linear,
		0   0%, 
		0 100%,
		from(#666), to(#333)
	);
	background: -moz-linear-gradient(
		bottom,
		#333,
		#666
	);
	font: normal normal normal 12px/16px "Monaco", sans-serif;
	margin: 0;
	color: white;
}

.container {
	background: rgba(32,32,32,0.5);
	border-radius: 8px;
	padding: 4px;
	margin: 0;
}

.container h3 {
	background-color: rgba(32,32,32,0.5);
	text-align: center;
	border: 1px solid #666;
	border-radius: 4px;
	padding: 4px;
	margin: 0 0 10px 0;
}

.container h3:last-child {
	margin: 0;
}

.container.title {
	position: fixed;
	top: 10px;
	left: 10px;
	right: 10px;
}

.container.ctrls {
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 300px;
}

fieldset {
	margin: 0 0 10px 0;
	border: 1px solid #666;
	border-radius: 4px;
}

fieldset:last-child {
	margin-bottom: 0;
}

fieldset legend {
	padding: 0 10px;
}


/*//////////////////////////////////////////////////////////////////////////////
// Animations
//////////////////////////////////////////////////////////////////////////////*/

@-webkit-keyframes x-spin {
	0%    { -webkit-transform: rotateX(0deg); }
	50%   { -webkit-transform: rotateX(180deg); }
	100%  { -webkit-transform: rotateX(360deg); }
}

@-webkit-keyframes y-spin {
	0%    { -webkit-transform: rotateY(0deg); }
	50%   { -webkit-transform: rotateY(180deg); }
	100%  { -webkit-transform: rotateY(360deg); }
}

@-webkit-keyframes z-spin {
	0%    { -webkit-transform: rotateZ(0deg); }
	50%   { -webkit-transform: rotateZ(180deg); }
	100%  { -webkit-transform: rotateZ(360deg); }
}

@-moz-keyframes x-spin {
	0%    { -moz-transform: rotateX(0deg); }
	50%   { -moz-transform: rotateX(180deg); }
	100%  { -moz-transform: rotateX(360deg); }
}

@-moz-keyframes y-spin {
	0%    { -moz-transform: rotateY(0deg); }
	50%   { -moz-transform: rotateY(180deg); }
	100%  { -moz-transform: rotateY(360deg); }
}

@-moz-keyframes z-spin {
	0%    { -moz-transform: rotateZ(0deg); }
	50%   { -moz-transform: rotateZ(180deg); }
	100%  { -moz-transform: rotateZ(360deg); }
}

.spin {
	-webkit-transform-style: preserve-3d;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform: rotate3d(0,0,0);
	-moz-transform-style: preserve-3d;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-transform: rotate3d(0,0,0);
}

.x-spin {
	-webkit-animation-name: x-spin;
	-moz-animation-name: x-spin;
}

.y-spin {
	-webkit-animation-name: y-spin;
	-moz-animation-name: y-spin;
}

.z-spin {
	-webkit-animation-name: z-spin;
	-moz-animation-name: z-spin;
}


/*//////////////////////////////////////////////////////////////////////////////
// Animation objects
//////////////////////////////////////////////////////////////////////////////*/

.stage {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	
	-webkit-perspective: 800;
	-webkit-perspective-origin: 0, 0;
	-moz-perspective: 800;
	-moz-perspective-origin: 0, 0;
}

.object {
	-webkit-transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s linear;
	-moz-transform-style: preserve-3d;
	-moz-transition: -webkit-transform 1s linear;
	/**
	border: 1px solid black;
	/**/
}

.face {
	cursor: pointer;
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: rgba(128, 128, 128, 0.5);
	/**/
	border: 1px solid rgba(32,32,32,0.5);
	/**/
	color: #FFFFFF;
	font-size: 38px;
	text-align: center;
	line-height: 100px;
	-webkit-transition:
		-webkit-transform 1s linear,
		background-color 500ms linear,
		border-color 500ms linear;
	-moz-transition:
		-moz-transform 1s linear,
		background-color 500ms linear,
		border-color 500ms linear;
}

.face:hover {
	background-color: rgba(255, 0, 0, 0.5);
	border-color: rgba(32, 0, 0, 0.5);
}


/*//////////////////////////////////////////////////////////////////////////////
// Type Cube
//////////////////////////////////////////////////////////////////////////////*/

.object.cube .face-1 {
	-webkit-transform: rotateY(0deg) translate3d(-50px, -50px, 50px);
	-moz-transform: rotateY(0deg) translate3d(-50px, -50px, 50px);
}

.object.cube .face-2 {
	-webkit-transform: rotateY(90deg) translate3d(0px, -50px, 0px);
	-moz-transform: rotateY(90deg) translate3d(0px, -50px, 0px);
}

.object.cube .face-3 {
	-webkit-transform: rotateY(180deg) translate3d(50px, -50px, 50px);
	-moz-transform: rotateY(180deg) translate3d(50px, -50px, 50px);
}

.object.cube .face-4 {
	-webkit-transform: rotateY(-90deg) translate3d(0px, -50px, 100px);
	-moz-transform: rotateY(-90deg) translate3d(0px, -50px, 100px);
}

.object.cube .face-5 {
	-webkit-transform: rotateX(90deg) translate3d(-50px, 0, 100px);
	-moz-transform: rotateX(90deg) translate3d(-50px, 0, 100px);
}

.object.cube .face-6 {
	-webkit-transform: rotateX(90deg) translate3d(-50px, 0px, 0px);
	-moz-transform: rotateX(90deg) translate3d(-50px, 0px, 0px);
}


/*//////////////////////////////////////////////////////////////////////////////
// Type Flat
//////////////////////////////////////////////////////////////////////////////*/

.object.flat {
	
}

.object.flat .face-1 {
	-webkit-transform: translate3d(-170px, -110px, 0);
	-moz-transform: translate3d(-170px, -110px, 0);
}

.object.flat .face-2 {
	-webkit-transform: translate3d(-50px, -110px, 0);
	-moz-transform: translate3d(-50px, -110px, 0);
}

.object.flat .face-3 {
	-webkit-transform: translate3d(70px, -110px, 0);
	-moz-transform: translate3d(70px, -110px, 0);
}

.object.flat .face-4 {
	-webkit-transform: translate3d(-170px, 10px, 0);
	-moz-transform: translate3d(-170px, 10px, 0);
}

.object.flat .face-5 {
	-webkit-transform: translate3d(-50px, 10px, 0);
	-moz-transform: translate3d(-50px, 10px, 0);
}

.object.flat .face-6 {
	-webkit-transform: translate3d(70px, 10px, 0);
	-moz-transform: translate3d(70px, 10px, 0);
}


/*//////////////////////////////////////////////////////////////////////////////
// Type Ring
//////////////////////////////////////////////////////////////////////////////*/

.object.ring {
}

.object.ring .face {
}

.object.ring .face-1 {
	-webkit-transform: translate3d(-50px, -50px, 0) rotateY(0deg) translateZ(100px);
	-moz-transform: translate3d(-50px, -50px, 0) rotateY(0deg) translateZ(100px);
}

.object.ring .face-2 {
	-webkit-transform: translate3d(-50px, -50px, 0) rotateY(60deg) translateZ(100px);
	-moz-transform: translate3d(-50px, -50px, 0) rotateY(60deg) translateZ(100px);
}

.object.ring .face-3 {
	-webkit-transform: translate3d(-50px, -50px, 0) rotateY(120deg) translateZ(100px);
	-moz-transform: translate3d(-50px, -50px, 0) rotateY(120deg) translateZ(100px);
}

.object.ring .face-4 {
	-webkit-transform: translate3d(-50px, -50px, 0) rotateY(180deg) translateZ(100px);
	-moz-transform: translate3d(-50px, -50px, 0) rotateY(180deg) translateZ(100px);
}

.object.ring .face-5 {
	-webkit-transform: translate3d(-50px, -50px, 0) rotateY(240deg) translateZ(100px);
	-moz-transform: translate3d(-50px, -50px, 0) rotateY(240deg) translateZ(100px);
}

.object.ring .face-6 {
	-webkit-transform: translate3d(-50px, -50px, 0) rotateY(300deg) translateZ(100px);
	-moz-transform: translate3d(-50px, -50px, 0) rotateY(300deg) translateZ(100px);
}


/*//////////////////////////////////////////////////////////////////////////////
// Type Stack
//////////////////////////////////////////////////////////////////////////////*/

.object.stack {
}

.object.ring .stack {
}

.object.stack .face-1 {
	-webkit-transform: rotateY(0deg) translate3d(-50px, -50px, 50px);
	-moz-transform: rotateY(0deg) translate3d(-50px, -50px, 50px);
}

.object.stack .face-2 {
	-webkit-transform: rotateY(0deg) translate3d(-50px, -50px, 30px);
	-moz-transform: rotateY(0deg) translate3d(-50px, -50px, 30px);
}

.object.stack .face-3 {
	-webkit-transform: rotateY(0deg) translate3d(-50px, -50px, 10px);
	-moz-transform: rotateY(0deg) translate3d(-50px, -50px, 10px);
}

.object.stack .face-4 {
	-webkit-transform: rotateY(0deg) translate3d(-50px,-50px,-10px);
	-moz-transform: rotateY(0deg) translate3d(-50px,-50px,-10px);
}

.object.stack .face-5 {
	-webkit-transform: rotateY(0deg) translate3d(-50px,-50px,-30px);
	-moz-transform: rotateY(0deg) translate3d(-50px,-50px,-30px);
}

.object.stack .face-6 {
	-webkit-transform: rotateY(0deg) translate3d(-50px,-50px,-50px);
	-moz-transform: rotateY(0deg) translate3d(-50px,-50px,-50px);
}
JS
// Javascript: Change classes etc.

(function($) {
	
	var _animations = [ 'x-spin', 'y-spin', 'z-spin' ];
	var _currentTransition = 'flat';
	
	$('#ctrlAnimation').click(function(e) {
		var el = e.target;
		if (el.tagName == 'INPUT' && el.type == 'checkbox') {
			$('.stage .spin')
				.eq(_animations.indexOf(el.value))
				.toggleClass(el.value);
		}
	});
	
	$('#ctrlTransition').click(function(e) {
		var el = e.target;
		if (el.tagName == 'INPUT' && el.type == 'radio') {
			$('.object')
				.removeClass(_currentTransition)
				.addClass(el.value);
			_currentTransition = el.value;
		}
	});
	
})(jQuery);
Host Instantly Drag and Drop Website Builder

 

Description

Test of the CSS3 transition and animation capabilities. Morphs 6 surfaces to different 3D shapes (flat, cube, ring and stack). Webkit/Firefox only.
Term
Mon, 11/27/2017 - 22:06

Related Codes

Pen ID
Pen ID
Pen ID