JS完成硬币翻转效果

最新推荐文章于 2024-07-01 13:53:18 发布

原创

最新推荐文章于 2024-07-01 13:53:18 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客介绍如何利用JavaScript实现鼠标上移时硬币翻转的效果。通过CSS和HTML部分的代码展示，详细解释了整个动画过程。

效果

鼠标上移，变成反面

CSS部分

	*{
				margin: 0px;
				padding: 0px;
			}
			body{
				background-color: blue;
			}
			.elbum{
				width: 300px;
				height: 400px;
				margin: 100px auto;
				
			}
			.outer{
				position: absolute;
				transform-origin: 0px 0px;
				transition: 2s;
				transition-timing-function: linear;
			}
			.elbum:hover .outer{
				transform: rotateY(-180deg);
			}
			.bg{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				/*border: 4px solid ;*/
				position: relative;
				tra