transform旋转的盒子

最新推荐文章于 2024-05-17 16:07:32 发布

每一天，每一步

最新推荐文章于 2024-05-17 16:07:32 发布

阅读量148

点赞数

分类专栏： HTML/CSS 文章标签： html css css3

本文链接：https://blog.csdn.net/u010234868/article/details/115450030

版权

HTML/CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML和CSS创建一个包含多个颜色方块的布局，并在鼠标悬停时实现方块的旋转动画效果。通过设置CSS的transform属性和transition属性，实现了平滑的360度旋转，为网页增添动态视觉体验。

摘要由CSDN通过智能技术生成

HTML代码：

<div class="colorBox">
	<div class="pink"></div>
	<div class="purple"></div>
	<div class="blue"></div>
	<div class="yellow"></div>
	<div class="red"></div>
	<div class="skyblue"></div>
</div>

CSS代码：

.colorBox {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	margin: 100px auto;
	position: relative;
	transition: all 1s;
}
.pink,
.purple,
.blue,
.yellow,
.red,
.skyblue {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: right top;
}
.pink {
	background-color: pink;
}
.purple {
	background-color: purple;
}
.blue {
	background-color: blue;
}
.yellow {
	background-color: yellow;
}
.red {
	background-color: red;
}
.skyblue {
	background-color: skyblue;
}
.colorBox:hover .pink {
	transform: rotate(60deg);
}
.colorBox:hover .purple {
	transform: rotate(120deg);
}
.colorBox:hover .blue {
	transform: rotate(180deg);
}
.colorBox:hover .yellow {
	transform: rotate(240deg);
}
.colorBox:hover .red {
	transform: rotate(300deg);
}
.colorBox:hover .skyblue {
	transform: rotate(360deg);
}