当前位置: 首页 > 面试题库 >

用css实现一个硬币旋转的效果?

赵雅懿
2023-03-14
本文向大家介绍用css实现一个硬币旋转的效果?相关面试题,主要包含被问及用css实现一个硬币旋转的效果?时的应答技巧和注意事项,需要的朋友参考一下

参考回答:

#euro {
width: 150px;
height: 150px;
margin-left: -75px;
margin-top: -75px;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
animation: spin 2.5s linear infinite;
}
.back {
background-image: url("/uploads/160101/backeuro.png");
width: 150px;
height: 150px;
}
.middle {
background-image: url("/uploads/160101/faceeuro.png");
width: 150px;
height: 150px;
transform: translateZ(1px);
position: absolute;
top: 0;
}
.front {
background-image: url("/uploads/160101/faceeuro.png");
height: 150px;
position: absolute;
top: 0;
transform: translateZ(10px);
width: 150px;
}
@keyframes spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}

 

 类似资料:
  • 本文向大家介绍手写一个使用css3旋转硬币的效果相关面试题,主要包含被问及手写一个使用css3旋转硬币的效果时的应答技巧和注意事项,需要的朋友参考一下

  • 我正试图解决一个经典的动态规划硬币兑换问题。这是一个家庭作业问题,我不是在寻找完整的解决方案,只是想找几个指针看看我做错了什么。 输入: 金额我们想用硬币支付一些价值 集合表示面值(1c、5c、10c、25c、100c、200c)的可用硬币数量 输出: 需要换手支付的最低硬币数。 假设: 收银机操作员有无限的硬币供应,知道如何给最佳的变化。 到目前为止,我试图做的是: 我试图建立一个数组C,使得每

  • 本文向大家介绍使用css实现一个loading的效果相关面试题,主要包含被问及使用css实现一个loading的效果时的应答技巧和注意事项,需要的朋友参考一下

  • 本文向大家介绍js实现3D旋转效果,包括了js实现3D旋转效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现3D旋转效果的具体代码,供大家参考,具体内容如下 实现效果: 实现过程: 步骤一:先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建). 步骤二:给盒子和图片,设置对应的样式 第三步: js

  • 本文向大家介绍使用css实现一个弹幕的效果相关面试题,主要包含被问及使用css实现一个弹幕的效果时的应答技巧和注意事项,需要的朋友参考一下 left的改变会在渲染的过程中导致reflow,所以用transform。

  • 本文向大家介绍js实现旋转木马效果,包括了js实现旋转木马效果的使用技巧和注意事项,需要的朋友参考一下 效果图: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!