CSS3 transform::rotate

HTML & CSS
1

Hello everybody!

This is my very 1st post here, and hope my query will receive geeks attention.
As a novice in CSS3, I tried the following code to rotate a shape, but in vain.
Any help will be appreciated.

<html>
<head>
<title>Hover Me</title>
<style>
h1
{
    position: absolute; left: 80px; top: 20px;
    display: inline-block;
    font-size: 2em; color: teal; width: 220px;
    cursor: pointer;
}

h1:hover::before
{
    display: inline-block;
    content: "X"; font-size: 0.8em; text-align: center;
    width: 30px; height: 30px; border: 5px solid GoldenRod; border-radius: 25px; 
    background-color: Gold; color: White;
    transform: rotate(360deg); 
}
</style>
</head>

<body>
<h1>Hover Me!</h1>
</body>
</html>
2

Hi,

Welcome to the forums :slight_smile:

The ‘X’ you are adding is being rotated by 360 degrees which means that you won’t notice any difference because that puts it right back where it started. :slight_smile:

If you wanted a transition on hover only then you would need to add a transition rule and then effect the transform only on hover.

I’m not sure if this is what you meant but the code will point you in the right direction.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1 {
	font-size: 2em;
	color: teal;
	cursor: pointer;
	margin:20px;
	display: inline-block;
}
h1:before {
	display: inline-block;
	content: "X";
	font-size: 0.8em;
	text-align: center;
	width: 30px;
	height: 30px;
	border: 5px solid GoldenRod;
	border-radius: 25px;
	background-color: gold;
	color: #fff;
	transition:.5s ease;
}
h1:hover:before {
	transform: rotate(360deg);
}

</style>
</head>

<body>
<h1>Hover Me!</h1>
</body>
</html>
1 Like
3

Thank U very much, PaulOB. Have a great time.
Regards.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.