Animated 3D Christmas Tree

animated-3d-christmas-tree.markdown

Animated 3D Christmas Tree

Pure CSS animated 3D Christmas tree

A Pen by Ana Travas on CodePen.

License.

index.pug

.main-wrapper

	.tree-container
		.star
		.spiral-container
			ul.spiral.one
				- for (var x = 1; x <=43; x++)
					li.light-wrapper(
						class="light-wrapper-"+x
					)
						.stabilise: .light

			ul.spiral.two
				- for (var x = 1; x <=43; x++)
					li.light-wrapper(
						class="light-wrapper-"+x
					)
						.stabilise: .light

			ul.spiral.three
				- for (var x = 1; x <=43; x++)
					li.light-wrapper(
						class="light-wrapper-"+x
					)
						.stabilise: .light

	.text-container
		h2 The best is yet to come
		h2.happy Happy Holidays

script.js

// ------------------------------
// Sorry, no JS here :)
// Happy Holidays from C2
// http://wearec2.com
// ------------------------------

style.less

@import url('https://fonts.googleapis.com/css?family=Nothing+You+Could+Do');
@itemsize: 5px;

.main-wrapper {
	background: radial-gradient(bottom, #b11919 0%, #730f0f 50%, #310606 78%);
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.tree-container {
	display: block;	
	height: 330px;
	margin: 0;
	padding: 0;
}

.text-container {
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 14%;
	left: 15%;
	right: 15%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;

	h2 {
		color: rgba(252, 251, 233, 0.85);
		font-size: 2vw;
		font-family: 'Nothing You Could Do', cursive;
		margin: 0 0 .8em 0;

		&.happy {
			font-size: 3.1vw;
			margin-bottom: 0.3em;
		}
	}

	a.c2 {
		@size: 40px;
		display: block;
		font-size: 13px;
		width: @size;
		height: @size;
		background-color: rgba(252, 251, 233, 0.8);
		border-radius: 50%;
		color: #8c1313;
		text-decoration: none;
		line-height: @size;
	}
}

.star {
	@dimensions: 10px;
  @color: #f7b93f;
	@divider: 1.3;
	border-radius: 0;
	border-color: @color transparent transparent transparent;
	border-style: solid;
	border-top-width: @dimensions / @divider;
	border-right-width: @dimensions;
	border-left-width: @dimensions;
	height: 0;
	width: 0;
	background: transparent;
	z-index: 100;
	animation: pulsate-star 1.4s ease-in-out infinite alternate-reverse;

	&:before,
	&:after {
		border-color: @color transparent transparent transparent;
		border-style: solid;
		border-top-width: @dimensions / @divider;
		border-right-width: @dimensions;
		border-left-width: @dimensions;
    border-bottom: 0;
		content: '';
		display: block;
		height: 0;
		left: -@dimensions;
		position: absolute;
		top: -@dimensions / @divider;
		width: 0;
	}

	&:before {
		transform: translate(15.5555555%, -15.5555555%) rotate(360deg/5) translateY(50%);
	}

	&:after {
		transform: translate(-15.5555555%, -15.5555555%) rotate(-360deg/5) translateY(50%);
	}
}

.spiral-container {
	width: 100%;
	height: 100%;
	display: block;
}

.spiral {
	position: relative;
	margin: 0;
	padding: 0;
	transform-style: preserve-3d;

	&.one {
		animation: rotate-tree 6s infinite linear both;
		animation-delay: -1.7s;

		.light {
			background: #fcfbe9;
		}
	}

	&.two {
		animation: rotate-tree 7s infinite linear both;
		animation-delay: -1s;

		.light {
			background: #e8a41d;
		}
	}

	&.three {
		animation: rotate-tree 8s infinite linear both;
		animation-delay: -0.1s;

		.light {
			background: #f5e393;
		}
	}

	> .light-wrapper {
		border-radius: 50%;
		position: absolute;
		display: block;
		width: @itemsize;
		height: @itemsize;
		left: 50%;
		top: 50%;
		margin: -@itemsize/2 0 0 -@itemsize/2;
	}

	.stabilise {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
	}

	.light {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		top: 0;
		left: 0;
		border-radius: 50%;
		opacity: 1;
		animation-name: pulsate;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate-reverse;
	}
}

.makespiral( @className: ~".spiral"; @itemNo:3; @degrees:0; @elNo: 1; @size: 5px; @delayOffset: 0 ) when ( @elNo <= @itemNo ) {
	@spacing: 10;
	@currDeg: unit(@degrees,deg);
	@correctionDeg: unit(-@degrees,deg);
	@y: unit(cos(@currDeg) * @elNo * @elNo / 12, px);
	@x: unit(sin(@currDeg) * @elNo * @elNo / 12, px);
	@z: unit(@elNo * @elNo / 7, px);
	@duration: unit(`Math.random() * 1 + 0.3 `,s);
	@randNo: `Math.random()`;

	@{className} {
		.light-wrapper.light-wrapper-@{elNo} {
			transform: translate3d( @x, @y, @z ) rotateX(90deg) rotateZ(0deg) rotateY(@correctionDeg);
			width: (@size * (@elNo / @itemNo) * 5);
			height: (@size * (@elNo / @itemNo) * 5);

			.light {
				animation-duration: @duration;
				animation-delay: @duration;
			}
		}
	}

	.makespiral(@className; @itemNo; @degrees + @spacing; @elNo + 1; @size; @delayOffset);
}

.makespiral(@className: ~".spiral.one"; @itemNo: 43; @size: 2px);
.makespiral(@className: ~".spiral.two"; @itemNo: 43; @size: 3px; @delayOffset: 1);
.makespiral(@className: ~".spiral.three"; @itemNo: 43; @size: 2px; @delayOffset: .5);

@keyframes pulsate {
  0% {
    transform: scale(.5);
    opacity: .4;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulsate-star {
  0% {
    transform: scale(.94);
    opacity: .8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes rotate-tree {
	0% {
		transform: rotateX(-90deg) rotateZ(0deg) rotateY(0deg);
	}
	100% {
		transform: rotateX(-90deg) rotateZ(360deg) rotateY(0deg);
	}
}

When I try to compile, I get an error.
SyntaxError: Error evaluating function unit: the first argument to unit must be a number. Have you forgotten parenthesis? in E:\Remote Falcon\Style.less on line 208, column 1:
207
208 .makespiral(@classname: ~".spiral.one"; @itemNo: 43; @SiZe: 2px);
I'm new to css and less. Can you help?