我正在尝试创建一个CSS动画,它看起来像一个div围绕X轴上的图像(或另一个div)旋转.
我能够在 http://codepen.io/Kupe517/pen/zBKGev创建一个粗略的想法,但动画div没有我正在寻找的旋转效果.我想我需要在转换中添加某种rotateX()并添加透视图,但我无法弄清楚正确的组合.我附上了我想要实现的那种动画的粗略图像.
我能够在 http://codepen.io/Kupe517/pen/zBKGev创建一个粗略的想法,但动画div没有我正在寻找的旋转效果.我想我需要在转换中添加某种rotateX()并添加透视图,但我无法弄清楚正确的组合.我附上了我想要实现的那种动画的粗略图像.
这是我当前的动画代码：
@keyframes moveBack {
0%{transform:translateY(0); z-index:10;}
25%{transform:translateY(435px); z-index:10;}
26%{z-index:0;}
50%{transform:translateY(0) scale(.8); z-index:0;}
75%{transform:translateY(-435px); z-index:0;}
76%{z-index:10;}
100%{transform:translateY(0); z-index:10;}
}
解决方法
这是一个简单的3D过渡,看起来就像你想要实现的那样.问题是你正在使用翻译,但你的目标是在X轴上旋转.
要启动转换,请将div悬停：
要启动转换,请将div悬停：
div{
position:relative;
width:300px; height:200px;
margin:10% auto;
perspective:500px;
transform-style:preserve-3d;
border:1px solid #000;
}
img{width:100%;}
p{
position:absolute;
left:250px; top:75px;
width:80px; height:40px;
margin:0; padding:5px 10px;
background:gold;
transform: rotateX(0deg) translatez(110px);
transition:transform 2s;
}
div:hover p{
transform: rotateX(360deg) translatez(110px);
}
<div> <img src="http://i.imgur.com/k8BtMvj.jpg"/> <p>Hover the div</p> </div>
如果您希望旋转div始终面向用户,您可以在translatez属性之后添加另一个旋转,如下所示：
div{
position:relative;
width:300px; height:200px;
margin:10% auto;
perspective:500px;
transform-style:preserve-3d;
border:1px solid #000;
}
img{width:100%;}
p{
position:absolute;
left:250px; top:75px;
width:80px; height:40px;
margin:0; padding:5px 10px;
background:gold;
transform: rotateX(0deg) translatez(130px) rotateX(0deg);
transition:transform 5s;
}
div:hover p{
transform: rotateX(360deg) translatez(130px) rotateX(-360deg);
}
<div> <img src="http://i.imgur.com/k8BtMvj.jpg"/> <p>Hover the div</p> </div>
