Untitled

dabblet.css

.container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50% -50%);
width:40px;
height:32px;
display:block;
}
.stick, .stick:before, .stick:after{
width:40px;
height:4px;
background:tomato;
position:absolute;
top:50%;
transform-origin:50% 50%;
transition:all 0.6s;
}
.stick:before{
top:-13px;
content:'';
position:absolute;
left:0;
}
.stick:after{
top:13px;
content:'';
position:absolute;
left:0;
}
.stick.trigger{
transform:rotate(180deg);
}
.stick.trigger:after{
transform-origin: -100% 50%;
transform:translateY(-14px) rotate(-45deg) scaleX(0.7);
}
.stick.trigger:before{

transform-origin: -100% 50%;
transform:translateY(14px) rotate(45deg) scaleX(0.7);
}

dabblet.html

<div class="container">
	<div class="stick"></div>
</div>

dabblet.js

$(function(){
$('.container').click(function(){
$('.stick').toggleClass('trigger');
})
})

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}