<!-- this script is provided by www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #333;
}

div {
    width: 300px;
    height: 300px;
    margin: 5px 50px;
    overflow: hidden;
    position: relative;
}

.top {
    width: 0;
    height: 1px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    transition: width .3s linear;
}

div:hover .top {
    width: 300px;
}

.right {
    width: 1px;
    height: 0;
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    transition: height .3s linear .4s;
}

div:hover .right {
    height: 500px;
}

.bottom {
    width: 0;
    height: 1px;
    background-color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    transition: width .3s linear .7s;
}

div:hover .bottom {
    width: 300px;
}

.left {
    width: 1px;
    height: 0;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: height .3s linear 1s;
}

div:hover .left {
    height: 300px;
}

.lotate3D {
    width: 250px;
    height: 200px;
    line-height: 300px;
    margin: 10px auto;
    background-color: #0af;
    text-align: center;
    transform: rotate3d(0,0,0,0deg);
    transition: transform .5s linear 1.3s;
}

div:hover .lotate3D {
    transform: rotate3d(0,1,1,180deg);
}
</style>
<div>
    <p class="top"></p>
    <p class="right"></p>
    <p class="bottom"></p>
    <p class="left"></p>
    <p class="lotate3D">rotate3D</p>
</div>
<a target='_blank' href='www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>