css加x轴,css – 3D在X轴上围绕圆变换

这是一个简单的3D过渡,看起来就像你想要实现的那样.问题是你正在使用翻译,但你的目标是在X轴上旋转.

要启动转换,请将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);

}

Hover the 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);

}

Hover the div

这些工作是因为当您在同一个声明上链接转换属性时,最后一个根据前一个声明进行.坐标系随先前的变换移动.