3D动画案例2

辛-夷

于 2024-11-26 19:14:36 发布

阅读量240

点赞数 5

分类专栏： css 文章标签： 3d

本文链接：https://blog.csdn.net/weixin_65450681/article/details/144065687

版权

css 专栏收录该内容

18 篇文章

订阅专栏

一、介绍

本节内容主要来讲解一下，划入盒子让其垂直与电脑屏幕，开始的状态为躺平的状态，这么说小伙伴可能不理解，那么我们来看下面的图例

二、思路解析

首先使用一个大盒子将四个小盒子包起来，设置盒子为弹性盒子水平排列，开启3d空间
添加第一个盒子，设置他的背景颜色为渐变色，添加图片，让其按照X轴进行旋转，添加盒子阴影。
复制4个盒子，更换图片以及背景颜色。
鼠标划入让其图片先旋转，再进行位移，如果在原位置进行旋转会导致图片直接穿过盒子展示，所以需要改变图片的旋转基点。

三、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./index.css">
</head>
<body>
	<!-- 最大的盒子 -->
	<div class="person_box">
		<!-- 子元素 -->
		<div class="child">
			<!-- png图片 -->
			<img src="./img/5webp.webp" alt="">
		</div>
		<div class="child child2">
			<img src="./img/6.webp" alt="">
		</div>
		<div class="child child3">
			<img src="./img/8.webp" alt="">
		</div>
		<div class="child child4">
			<img src="./img/7.webp" alt="">
		</div>
	</div>
</body>
</html>

四、CSS代码

.person_box{
/*	设置大盒子的宽高*/
	width: 100%;
    height: 510px;
/*    距离上面元素的距离，可忽略*/
    margin-top: 255px;
/*   添加左右两边内边距，并且设置为怪异盒模型，可不加 */
    padding:0 300px;
    box-sizing:border-box;
/*    开启3D空间*/
    transform-style:preserve-3d ;
/*    增加景深*/
    perspective: 1000px;
}
.child{
/*	使用浮动让其在一行排列*/
	float: left;
/*	距离左边的距离*/
	margin-left: 20px;
/*	设置宽高*/
	width: 300px;
	height: 100%;
/*	设置背景图*/
	background: linear-gradient(to right bottom,hotpink,orange,red);
/*	设置盒子为flex布局,在子级中使用margin:auto让子级垂直水平居中*/
	display: flex;
/*	开启3D空间*/
	transform-style:preserve-3d;
/*	设置盒子阴影*/
	box-shadow: 0 10px 30px #333;
/*	让其对于x轴及进行旋转,位移,躺平*/
	transform:translateY(-100px) rotateX(60deg);	
}
/*更改其他子级的背景颜色*/
.child2{
	background: linear-gradient(to bottom right, rgb(45, 196, 255), rgb(255, 16, 255));
}
.child3{
	background: linear-gradient(to bottom right, rgb(131, 255, 16), rgb(255, 217, 0));
}
.child4{
	background: linear-gradient(to bottom right, rgb(0, 255, 234), rgb(0, 49, 211));
}
/*设置父级盒子为flex布局,在子级中使用margin:auto让子级垂直水平居中*/
.child>img{
	margin: auto;
/*	添加过渡属性，让其更加丝滑*/
	transition: all .3s;
}
/*鼠标划入，让其中的img图片抬起来，设置先旋转后平移，更改图片旋转的基点*/
.child:hover>img{
	transform: rotateX(-60deg) translateZ(300px);
}

运行结果