css3绕一边旋转 |天猫图片空间怎么上传css

/*定义一个div*/
div{
width: 200px;
height: 200px;
margin: 50px auto;
border-radius:50%;
background-color:#eee;
position:relative;
}
/*定义div子元素*/
div:before{
content: "";
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
top: -10px;
left: -10px;
border-radius:50%;
transform:rotate(-45deg);
z-index: -1;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/*定义hover状态下的div子元素*/
div:hover:before{
transform:rotate(225deg);
}

上面的代码中，大家首先定义一个div元素，并设置其宽度、高度、外边距、圆角等属性。然后，大家在div元素中添加一个:before伪元素，并设置其内容为空，宽度、高度、背景颜色、位置、圆角、阴影等属性。在transform属性中，大家设置其rotate(-45deg)表示该元素绕Z轴逆时针旋转45度。

接下来，大家在div:hover状态下，再次定义:before伪元素，并在transform属性中设置其rotate(225deg)表示该元素绕Z轴顺时针旋转225度，从而完成元素绕一边旋转的效果。

通过这种方法，大家可以方便地实现元素绕一边旋转的效果，为网页添加更多的动感和趣味性。