本文主要是介绍transform旋转的盒子，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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);
}
实现效果：
这篇关于transform旋转的盒子的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
