It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 6 March 2021
One of the important effects for the websites are hovering effects. With such effects, Texts, images, etc. will look different when they are pointed by the mouse pointer. The following code rotates a text in 3 dimensions and shows an animating border around it. Enjoy!
<!-- this script is provided by http://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='http://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!