3D Rotating Text with Animating Border

Written by @kerixa 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!

Code Snippet:

                                                
                                                <!-- 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>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Designer Diva, Jirgensons E, vamsi, wapmohin, azmir
advertisement 2