css3怎么制作打开的大门动画

css3怎么制作打开的大门动画

1首先，先在中加入门



2然后写好大门的css，
div{
margin:0;
padding:0;
}
.door{
width:450px;
height:450px;
position:relative;
background:#a1a1a1;
}
.door .leftDoor,.door .rightDoor{
position:absolute;
width:224px;
height:400px;
top:57px;
top:50px;
background:#d1d1d1;
}
.door .leftDoor{
left:0;
border-right:1px solid #999;
box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1);
}
.door .rightDoor{
right:0;
border-left:1px solid #999;
transform-origin: 100% 40%;
}

先为左边的门添加动画
@-webkit-keyframes leftDoor {
0%,100% {
-webkit-transform-origin: 0% 40%;
}
0{
-webkit-transform:perspective(0) rotateY(0);
}
100% {
-webkit-transform:perspective(600px) rotateY(70deg);
}
}
}
@keyframes leftDoor {
0%,100% {
transform-origin: 0% 40%;
}
0{
transform:perspective(0) rotateY(0);
}
100% {
transform:perspective(600px) rotateY(70deg);
}
}

然后为右边的门添加css3动画，由于左右门对称，只要变化相应的地方就行了
@-webkit-keyframes rightDoor {
0%,100% {
-webkit-transform-origin: 100% 40%;
}

100% {
-o-transform:perspective(600px) rotateY(-70deg);
}
}
@keyframes rightDoor {
0%,100% {
transform-origin: 100% 40%;
}
0{
transform:perspective(0) rotateY(0);
}
100% {
transform:perspective(600px) rotateY(-70deg);
}
}

5这里的动画主要用到的是rotate和perspective
6如果想要动画点击后才开门，可以加入一个按钮，然后js控制