纯CSS制作3D旋转风车动画效果

效果图展示

      纯CSS制作3D旋转风车动画效果_第1张图片

HTML源码:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯CSS制作3D旋转风车动画效果title>
<link rel="stylesheet" href="index.css" type="text/css" />
head>
	<div class="box">
		<div>
 			<span>span>
            		<span>span>
            		<span>span>
            		<span>span>
		<div/>
	<div/>
<body>
body>
html>

CSS源码:

/* CSS Document */
body{
	margin:0;
	padding:0;
	background:#607d8b;
}
.box{
	position:absolute;
	top:calc(50% - 150px);
	left:calc(50% - 100px);
	transform:perspective(1000px) rotateY(-45deg);
	width:200px;
	height:300px;
	transform-style:preserve-3d;
}
.box:before{
	content:'';
	position:absolute;
	bottom:-100px;
	width:100%;
	left:0;
	background:#000;
	filter:blur(40px);
	opacity:0.5;
	transform: rotateX(90deg);
}
.box div{
	position:absolute;
	top:0;
	lef:0;
	width:100%;
	height:100%;
	transform-style:preserve-3d;
	animation: animate 5s linear infinite;
}
.box div span{
	position:absolute;
	top:0;
	lef:0;
	display:block;
	width:100%;
	height:100%;
	background: linear-gradient(0deg,#f1f1f1,#bbb,#f1f1f1);
	border-radius: 20px;
}
.box div span:nth-child(1){
	transform: rotateX(0deg);
}
.box div span:nth-child(2){
	transform: rotateX(45deg);
}
.box div span:nth-child(3){
	transform: rotateX(-45deg);
}
.box div span:nth-child(3){
	transform: rotateX(-45deg);
}
.box div span:nth-child(3){
	transform: rotateX(-45deg);
}
.box div span:nth-child(3){
	transform: rotateX(-45deg);
}
@keyframes animate{
	0%{
		transform:perspective(1000px) rotateX(0deg);
	}
}
@keyframes animate{
	100%{
		transform:perspective(1000px) rotateX(359deg);
	}
}

你可能感兴趣的:(纯CSS制作3D旋转风车动画效果)