您的位置：首页 > Web前端 > HTML5

html5 学习-3d动画

2016-10-08 11:29 295 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
margin:0 auto;
width:1200px;
height:405px;
background:url(demo.jpg) center no-repeat;
/*定义3d空间*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
/*定义动画名称*/
-webkit-animation-name: myfirst;
-moz-animation-name: myfirst;
-o-animation-name: myfirst;
animation-name: myfirst;
/*定义动画时间*/
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
/*定义动画播放的次数*/
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/*定义动画过渡的效果为线性*/
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}

/*调用动画*/
@keyframes myfirst {
0%{
-webkit-transform: rotateY(0deg);
}
50%{
-webkit-transform: rotateY(180deg);
}
100%{
-webkit-transform: rotateY(360deg);
}
}

@-webkit-keyframes myfirst {
0%{
-webkit-transform: rotateY(0deg);
}
50%{
-webkit-transform: rotateY(180deg);
}
100%{
-webkit-transform: rotateY(360deg);
}
}

@-moz-keyframes myfirst {
0%{
-webkit-transform: rotateY(0deg);
}
50%{
-webkit-transform: rotateY(180deg);
}
100%{
-webkit-transform: rotateY(360deg);
}
}

@-o-keyframes myfirst {
0%{
-webkit-transform: rotateY(0deg);
}
50%{
-webkit-transform: rotateY(180deg);
}
100%{
-webkit-transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航