JSFiddle - React, Tailwind, and code Playground

by nickaknudson

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>
<div id='light1' class='spotlight'>
    <div class='spotlightrays'>
        <div class='spotlightray'></div>
        <div class='spotlightray horizontal'></div>
    </div>
</div>

CSS

body {
    background-color:black;
}

#light1 {
    margin-top:200px;
    margin-left:400px;
}
.spotlight {
	width: 0;
	height: 0;
    -webkit-perspective: 1200px;
    -webkit-perspective-origin: 0px 60px;
}

.spotlightrays {
    -webkit-transform:matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    -webkit-transform-origin: 100% 50%;
}

.spotlightray {
    margin-top:-100px;
    margin-left:-1000px;
	width: 0px;
	height: 0px;
	border-top: 50px solid transparent;
	border-left: 1000px solid blue;
	border-bottom: 50px solid transparent;
}

.horizontal {
    -webkit-transform:rotateX(90deg);
    -webkit-transform-origin: 100% 50%;
}

CoffeeScript

$(document).ready ->
    $('.spotlightrays')
        .transition {
            rotate3d: '0,1,0,92deg',
            duration: 3500
        }