【css】七夕程序员的浪漫，3d旋转相册

听听那晚风

已于 2022-08-04 18:48:57 修改

阅读量4.1k

点赞数

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

于 2022-08-04 15:56:01 首次发布

本文链接：https://blog.csdn.net/GongWei_/article/details/126160875

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏


<template>
	<div class="max">
		<div class="box">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<div class="box-item">
				<image src="../../../static/images/managementCenter/card/jjy1.webp" mode=""></image>
			</div>
			<div class="box-item">
				<image src="../../../static/images/managementCenter/card/jjy2.webp" mode=""></image>
			</div>
			<div class="box-item">
				<image src="../../../static/images/managementCenter/card/jjy3.webp" mode=""></image>
			</div>
			<div class="box-item">
				<image src="../../../static/images/managementCenter/card/jjy4.webp" mode=""></image>
			</div>
			<div class="box-item">
				<image src="../../../static/images/managementCenter/card/jjy5.webp" mode=""></image>
			</div>
			<div class="box-item">
				<image src="../../../static/images/managementCenter/card/jjy6.webp" mode=""></image>
			</div>
		</div>
	</div>
</template>
<style>
	uni-page-body {
		height: 100%;
	}

	image {
		width: 100%;
		height: 100%;
	}
	* {
		margin: 0px;
		padding: 0px;
	}

	.max {
		margin: 250px auto;
	}

	.max,
	.box {
		position: relative;
		width: 200px;
		height: 200px;
		perspective: 5000px;
	}

	.box {
		transform-style: preserve-3d;
		transition: all 4.5s ease;
		animation: xz 6s linear infinite normal;
	}
	@keyframes xz{
		0%{
			transform: rotateX(0deg) rotateY(0deg);
		}100%{
			transform: rotateX(360deg) rotateY(720deg);
		}
	}
	.box p {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 200px;
		height: 200px;
		font: bold 50px/200px "微软雅黑";
		text-align: center;
	}

	.box p:nth-child(1) {
		background-color: rgba(87,250,255, 0.3);
		transform: rotateX(360deg) translateZ(-100px);
	}

	.box p:nth-child(6) {
		background-color: rgba(87,250,255,0.3);
		transform: translateZ(100px);
	}

	.box p:nth-child(2) {
		background-color: rgba(233, 1, 111, 0.3);
		transform: rotateY(90deg) translateZ(100px);
	}

	.box p:nth-child(5) {
		background-color: rgba(241, 187, 10, 0.3);
		transform: rotateY(-90deg) translateZ(100px);
	}

	.box p:nth-child(3) {
		background-color: rgba(133, 223, 16, 0.3);
		transform: rotateX(-270deg) translateZ(100px);
	}

	.box p:nth-child(4) {
		background-color: rgba(26, 151, 135, 0.3);
		transform: rotateX(-90deg) translateZ(100px);
	}
	.box-item{
		position: absolute;
		left: 25%;
		top: 25%;
		width: 100px;
		height: 100px;
		display: flex;
		align-items: center;
	}
	.box-item:nth-of-type(1) {
		transform: rotateX(360deg) translateZ(-50px);
	}
	
	.box-item:nth-of-type(6) {
		transform: translateZ(50px);
	}
	
	.box-item:nth-of-type(2) {
		transform: rotateY(90deg) translateZ(50px);
	}
	
	.box-item:nth-of-type(5) {
		transform: rotateY(-90deg) translateZ(50px);
	}
	
	.box-item:nth-of-type(3) {
		transform: rotateX(-270deg) translateZ(50px);
	}
	
	.box-item:nth-of-type(4) {
		transform: rotateX(-90deg) translateZ(50px);
	}
	
	.box:hover p:nth-child(1) {
		background-color: rgba(87,250,255, 0.3);
		transform: rotateX(360deg) translateZ(-150px);
	}
	
	.box:hover p:nth-child(6) {
		background-color: rgba(87,250,255,0.3);
		transform: translateZ(150px);
	}
	
	.box:hover p:nth-child(2) {
		background-color: rgba(233, 1, 111,0.3);
		transform: rotateY(90deg) translateZ(150px);
	}
	
	.box:hover p:nth-child(5) {
		background-color: rgba(241, 187, 10,0.3);
		transform: rotateY(-90deg) translateZ(150px);
	}
	
	.box:hover p:nth-child(3) {
		background-color: rgba(133, 223, 16, 0.3);
		transform: rotateX(-270deg) translateZ(150px);
	}
	
	.box:hover p:nth-child(4) {
		background-color: rgba(26, 151, 135,0.3);
		transform: rotateX(-90deg) translateZ(150px);
	}
</style>