用css实现一个硬币旋转的效果?
发布于 2020-02-01 22:36:50
关注者
0
被浏览
1239
1 个回答
-
参考回答:
#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旋转硬币的效果
2021-01-11 关注 0 浏览181 2答案
-
使用css3做一个魔方旋转的效果
2021-01-11 关注 0 浏览138 2答案
-
使用css实现一个loading的效果
2021-01-11 关注 0 浏览145 2答案
-
使用css实现一个弹幕的效果
2021-01-11 关注 0 浏览162 2答案
-
请使用css实现一个小波纹的效果
2021-01-11 关注 0 浏览170 0答案
-
用CSS实现一个轮播图
2021-01-11 关注 0 浏览155 2答案
-
使用css3实现一个斑马线的效果
2021-01-11 关注 0 浏览109 5答案
-
如果要将一个元素旋转 90°,可以使用 CSS 中的哪个属性实现()
2022-03-03 关注 0 浏览36 1答案
-
用css实现倒影的效果
2021-01-11 关注 0 浏览147 1答案
-
用js实现一个导航吸顶效果
2021-01-11 关注 0 浏览217 3答案