JS完成硬币翻转效果

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

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

0 ·

CC 4.0 BY-SA版权

这篇博客详细介绍了如何利用HTML和CSS构建硬币翻转的基础结构，并通过JavaScript实现硬币翻转的动态效果。内容包括HTML布局、CSS样式设置以及JavaScript翻转逻辑的编写，最终达到逼真的硬币翻转动画展示。

HTML部分：

		<div class="bg">
				<div class="left"></div>
				<div class="right"></div>
		</div>

CSS部分：

			.bg{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				border: 4px solid ;
				position: relative;
				transform-style: preserve-3d;//父级要保存3D状态，不可少
				transition: 1s;
			}
			.left{
				width: 300px;
				height: 300px;
				background: url(animation/bg.png) no-repeat 0px 0px;
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.right{
				width: 300px;
				height: 300px;
				background: url(animation/bg.png) no-repeat -305px 0px;
				position: absolute;
				top: 0px;
				left: 0px;
				backface-visibility: hidden;//可以不设置这个属性
				transform: rotateY(180deg);//反转后即不可见
			}
			.bg:hover{
				transform: rotateY(180deg);
			}

效果：