CSS在旋转的正六边形上过渡_css旋转90度过渡1s-CSDN博客

本文链接：https://blog.csdn.net/chenlunju/article/details/85013033

效果图如上所示。

CSS3 动画属性（Animation）

transition: all 1s linear;

all:所有属性都将获得过渡效果

1s:规定完成过渡效果需要多少秒或毫秒。

linear:规定速度效果的速度曲线。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style1215.css">
</head>
<body>
	<div class="div anim_transition">css3过渡</div>
</body>
</html>

.anim_transition {
	background-color: red;
	text-align: center;
	line-height: 173.2px;
	transition: all 1s linear;
}
.anim_transition:hover {
	line-height: 173.2px;
	transform: rotate(360deg);
}

.div {
	position: relative;
	width: 100px;
	height: 173.2px;
	margin: 100px;
	background-color: red;
}
.div:before {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	right:100px;
	border-width: 86.6px 50px;
	border-style: solid;
	border-color: transparent red transparent transparent;
}

.div:after {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	left:100px;
	border-width: 86.6px 50px;
	border-style: solid;
	border-color: transparent transparent transparent red;
	top:0;
}