experiment with transition

by cliftonyeo

HTML

<div id="frame">

<div id="base_1" class="base">
	<div class="one">
		<div class="one">
			<div class="one">
				<div class="one"><div class="one"><div class="one"><div class="one"><div class="one"><div class="one"><div class="one"></div></div></div></div></div></div></div>
			</div>
		</div>
	</div>
</div>
    
</div>

CSS

#frame {
        position: absolute;
    	width: 1024px;
    	height: 768px;
    	background: rgba(20,20,20,.1);
    	border: thin solid black;
    	left: 50%;
    	top: 50%;
    	margin-top: -384px;
    	margin-left: -512px;
    	overflow: hidden;
}

.base {
	height: 50px;
	width: 50px;
	position:relative;
	transform:;
	top:250px;
	left:350px;
	background-color:rgba(255,255,255,0.1);
	border: 1px dashed rgba(0,0,0,0.1);
	}

.one {
	height: inherit;
	width: inherit;
	background-color: inherit;
	border: inherit;
	position:relative;
	top:50%;
	left: 50%;
	transform:inherit;
	border: inherit;
	}

.base:hover {
    transform:rotate(255deg) skew(45deg,5deg);
    background-color: rgba(230,10,0,0.4);
	border: 1px solid black;
    transition-duration:5s;
}