transform旋转木马

最新推荐文章于 2023-07-07 14:58:16 发布

每一天，每一步

最新推荐文章于 2023-07-07 14:58:16 发布

阅读量82

点赞数

分类专栏： HTML/CSS 文章标签： html css css3

本文链接：https://blog.csdn.net/u010234868/article/details/115471907

版权

HTML/CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

这篇博客介绍了一种使用CSS3实现3D旋转的面包屑效果，包括HTML结构和CSS样式代码。通过设置perspective、transform、transform-style等属性，创建了一个360度旋转的面包屑展示，每个部分在旋转中呈现出不同的角度。当鼠标悬停在section元素上时，整个结构会进行平滑的360度旋转，提供动态的视觉体验。

摘要由CSDN通过智能技术生成

HTML代码：

<div class="father">
	<img src="images/bread3.png" alt="">
</div>
<section>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</section>

CSS代码：

body {
	perspective: 1000px;
}
.father {
	width: 167px;
	height: 180px;
	margin: 0 auto;
	border: 5px solid red;
	transform: rotateY(30deg);
	transform-style: preserve-3d;
}
.father img {
	border: 5px solid blue;
	transform: rotateY(30deg);
}
section {
 	width: 170px;
 	height: 170px;
 	margin: 100px auto;
 	background: url(images/bread1.png) no-repeat;
 	-webkit-background-size: cover;
 	background-size: cover;
 	position: relative;
 	transform-style: preserve-3d;
 	transition: all 5s linear;
 }
section:hover {
 	transform: rotateY(360deg);
}
section div {
 	width: 100%;
	height: 100%;
	background: url(images/bread2.png) no-repeat;
	-webkit-background-size: cover;
 	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}
section div:nth-child(1) {
	transform: rotateY(0deg) translateZ(200px);
}
section div:nth-child(2) {
	transform: rotateY(60deg) translateZ(200px);
}
section div:nth-child(3) {
	transform: rotateY(120deg) translateZ(200px);
}
section div:nth-child(4) {
	transform: rotateY(180deg) translateZ(200px);
}
section div:nth-child(5) {
	transform: rotateY(240deg) translateZ(200px);
}
section div:nth-child(6) {
	transform: rotateY(300deg) translateZ(200px);
}