# 1. 3D動畫效果1
CSS
~~~
/*首頁3D動畫效果*/
.box3d{
position: relative;
perspective: 900px;
-webkit-perspective: 30px;
-moz-perspective: 30px;
}
.dong3d{
transform-origin: 0 0;
animation: dong3d .5s ease-out;
}
@-moz-keyframes dong3d{
from{
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg); /* Safari 和 Chrome */
-moz-transform: rotateX(90deg); /* Firefox */
}
to{
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg); /* Safari 和 Chrome */
-moz-transform: rotateX(0deg); /* Firefox */
}
}
@keyframes dong3d{
from{
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg); /* Safari 和 Chrome */
-moz-transform: rotateX(90deg); /* Firefox */
}
to{
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg); /* Safari 和 Chrome */
-moz-transform: rotateX(0deg); /* Firefox */
}
}
@-webkit-keyframes dong3d{
from{
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg); /* Safari 和 Chrome */
-moz-transform: rotateX(90deg); /* Firefox */
}
to{
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg); /* Safari 和 Chrome */
-moz-transform: rotateX(0deg); /* Firefox */
}
}
~~~
