利用css3中2d变换的功能制作爱心

利用css3中2d变换的功能制作爱心

html:

<div class="header"></div>

css:

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.header{
		width: 300px;
		height: 300px;
		background-color: #ff0000;
		margin: 200px auto 0;
		/*旋转rotate*/
		transform:rotate(45deg);
		/*浏览器内核标识码*/
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		
		position: relative;
		color: yellow;
		font-size: 36px;
		font-weight: border;
		font-family: "arial black";
	}
	.header::before{
		content: "HTML5";
		width: 300px;
		height: 300px;
		border-radius: 50%;
		background-color: green;
		position: absolute;
		top: 0;
		left: -150px;
		text-align: center;
		line-height: 200px;
		transform: rotate(-90deg);
		
	}
	.header::after{
		content: "CSS3";
		width: 300px;
		height: 300px;
		border-radius: 50%;
		background-color: pink;
		position: absolute;
		top: -150px;
		left: 0;
		text-align: center;
		line-height: 200px;
	}
</style>

调整 绿色的圆里的字体方向：

让绿色图像旋转 -90度

transform: rotate(-90deg);

效果如下所示：

样式调整后的最后效果，css代码如下所示：

.header::before{
	content: "HTML5";
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background-color: red;
	position: absolute;
	top: 0;
	left: -150px;
	text-align: center;
	line-height: 300px;
	transform: rotate(-90deg);
	
}
.header::after{
	content: "CSS3";
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background-color: red;
	position: absolute;
	top: -150px;
	left: 0;
	text-align: center;
	line-height: 300px;
}