css使用transform: rotate()创建动态效果

62次阅读
没有评论

使用CSS3的transform属性中的rotate()函数可以创建旋转的动态效果。结合CSS3的动画属性,可以实现旋转的动态效果。

下面是一个使用rotate()函数创建动态效果的示例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Rotate Example</title>
	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: #f00;
			transform-origin: center;
			animation: rotate 2s linear infinite;
		}
		
		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

在上面的示例中,一个宽高都为100px的div元素使用了transform-origin属性将旋转基点设置为元素的中心点,并使用了动画属性animation,将元素旋转2秒钟,并且以线性方式循环播放。同时,在@keyframes规则中定义了旋转的关键帧,从0度旋转到360度,实现了元素的旋转动态效果。

需要注意的是,rotate()函数的参数可以是变量,也可以是JS表达式,因此可以实现更加复杂的动态效果。

正文完
 
评论(没有评论)