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 https://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='https://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!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300