css旋转木马特效

原创已于 2023-08-16 14:42:24 修改

· 474 阅读

0 ·

版权

文章标签：

#css #前端 #html

于 2023-01-13 16:00:12 首次发布

CSS 专栏收录该内容

11 篇文章

订阅专栏

该文章介绍了如何使用HTML和CSS技术，结合动画、2D转换、透视效果以及背景图片居中平铺，创建出一个动态的旋转木马视觉效果。通过@keyframes定义动画，以及对不同div应用不同的旋转和位移变换，实现了3D旋转展示。当鼠标悬停时，旋转效果会暂停，提供交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文章带来了非常帅的旋转木马特效,利用纯html+css打造而成

核心技术: 动画+2D转换+透视效果+背景图片居中平铺

咱们先看一下效果

HTML代码

<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</section>
</body>

CSS代码

body{
	perspective: 1000px;/* 开启透视 */
}
section{
	width: 300px;
	height: 200px;
	margin: 100px auto;
	position: relative;
	transform-style: preserve-3d;
	animation: rotate 10s linear infinite;
	background: url(img/a.png);
	background-size: cover;
	background-position: center;
}
@keyframes rotate{
	0%{
		transform: rotateY(0);
	}
	100%{
		transform: rotateY(360deg);
	}
}
/* 鼠标放上去暂停 */
section:hover{
	cursor: pointer;
	animation-play-state: paused;
}
section div{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
section div:nth-child(1){
	background: url(img/b.png) no-repeat;
	background-size: cover;
	background-position: center;
	transform: translateZ(300px);
}
section div:nth-child(2){
	background: url(img/c.png) no-repeat;
	background-size: cover;
	background-position: center;
    transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3){
	background: url(img/d.png) no-repeat;
	background-size: cover;
	background-position: center;
	transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4){
	background: url(img/e.png) no-repeat;
	background-size: cover;
	background-position: center;
	transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5){
	background: url(img/f.png) no-repeat;
	background-size: cover;
	background-position: center;
	transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6){
	background: url(img/g.png) no-repeat;
	background-size: cover;
	background-position: center;
	transform: rotateY(300deg) translateZ(300px);
}