为什么突然没有3D效果了
来源：3-1 @keyframes
qq_世味_0
2017-03-03 10:44:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
</head>
<style>
body{
background: #abcdef;
}
div{
position: relative;width: 760px;height: 760px;margin: auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div div{
position: absolute;top: 0;left: 0;right: 0;bottom: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;background-position: center;
}
/*-webkit-animation-name: circle_inner;定义动画名
animation-name: circle_inner;
-webkit-animation-duration: 10s;设置动画时间
animation-duration: 10s;
-webkit-animation-timing-function: linear;设置动画动的速度
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;设置动画一直动
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;让动画先正着来，再反着来
animation-direction: alternate;*/
div .inner{
background-image: url(images/circle_inner.png);
-webkit-animation: circle_inner 10s linear infinite;
animation: circle_inner 10s linear infinite;
}
div .middle{
background-image: url(images/circle_middle.png);
-webkit-animation: circle_middle 10s linear infinite;
animation: circle_middle 10s linear infinite;
}
div .outer{
background-image: url(images/circle_outer.png);
-webkit-animation: circle_outer 10s linear infinite;
animation: circle_outer 10s linear infinite;
}
div .imooc{
background-image: url(images/imooc.png);
}
@keyframes circle_inner{
form{transform: rotateX(0deg);}
25%{transform: rotateX(45deg);}
75%{transform: rotateX(315deg);}
to{transform: rotateX(360deg);}
}
@keyframes circle_middle{
form{transform: rotateX(0deg);}
25%{transform: rotateX(45deg);}
75%{transform: rotateX(315deg);}
to{transform: rotateX(360deg);}
}
@keyframes circle_outer{
form{transform: rotateX(0deg);}
25%{transform: rotateX(45deg);}
75%{transform: rotateX(315deg);}
to{transform: rotateX(360deg);}
}
</style>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
2回答
-
qq_世味_0
提问者
2017-03-03
谢谢老师 刚开始为了省事 直接复制粘贴了 忘记更改X,Y,Z轴
0 -
小于飞飞
2017-03-03
你好，根据你的代码情况，分析如下：
提交的HTML代码，没有写全对应的class名，如：.middle。
circle_inner、circle_middle、circle_outer 旋转角度都是x方向，设置不同的x\y\z 方向。
因为关键帧中，不同的帧设置不同的角度，而角度之间要不是平均分配的，所以会出现有时快，有时慢。
希望对你有帮助，祝学习愉快，欢迎采纳。
0
相似问题