一.前言
学习前端是件很有趣的事,今天我又来分享一下关于html+css实现的3D效果的照片墙的代码啦,希望感兴趣的小伙伴会喜欢!
正文:
今天,我们要做一个3D旋转相册,首先让我们了解一下关于3D。
3D立体其实就像数学中的x轴,y轴,z轴,在网页上设置z轴与y轴的偏移量,能给人们带来很强的视觉效果,其实是一种视觉假象,让人们看到的是3D效果。
接下来看一下3D旋转照片墙的效果图
代码如下:
1.html:设置一个盒子装事先准备好的图片,可以给盒子设置好名字,方便以后设置样式
<div class="container">
<div class="box">
<div class="circle circle1">
<img src="./img/QQ图片20221114190101.jpg" alt="">
</div>
<div class="circle circle2">
<img src="./img/QQ图片20221114190057.jpg" alt="">
</div>
<div class="circle circle3">
<img src="./img/QQ图片20221114190053.jpg" alt="">
</div>
<div class="circle circle4">
<img src="./img/QQ图片20221114190048.jpg" alt="">
</div>
<div class="circle circle5">
<img src="./img/QQ图片20221114190044.jpg" alt="">
</div>
<div class="circle circle6">
<img src="./img/QQ图片20221114190038.jpg" alt="">
</div>
<div class="circle circle7">
<img src="./img/QQ图片20221114190014.jpg" alt="">
</div>
<div class="circle circle8">
<img src="./img/QQ图片20221114190008.jpg" alt="">
</div>
<div class="circle circle9">
<img src="./img/QQ图片20221114190002.jpg" alt="">
</div>
<div class="circle circle10">
<img src="./img/QQ图片20221114185953.jpg" alt="">
</div>
</div>
</div>
2.修改默认样式,设置body的视口宽高,背景颜色。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置可视窗口的宽高 */
body {
width: 100vw;
height: 100vh;
position: relative;
background-color: pink;
}
3.设置内部样式,给盒子设置一个绝对定位,遵循子绝父相的原则,属性:
perspective
景深(近大远小),是观察物体的一个视角距离,距离越小效果越明显,它的数值一般为900px-1200px。
使用方法:
perspective:1200px;(在父元素中使用)
transform:perspective(1200px);(在子元素中使用,但是我们一般不用这种方法)
.container {
position: absolute;
width: 1000px;
height: 500px;
top: 15%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}
4.transform-style使用方法:transform-style:preserve-3d;(让当前元素形成一个3D空间)设置图片宽高,边框圆角。
.box {
width: 150px;
height: 150px;
position: relative;
transform-style: preserve-3d;
animation: run 10s linear infinite;
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
/*设置图像大小、边框、圆角、位置*/
.circle img {
width: 200px;
height: 150px;
border: 1px solid #ccc;
border-radius: 10px;
box-sizing: border-box;
}
5.perspective-origin观察3D元素的角度(位置)使用方法:
perspective-origin: left top;
perspective-origin: center center;
perspective-origin: 50% 50%;
perspective-origin: 0px 0px;
功能函数:translate()3D位移使用方法:
transform:translate3d(x,y,z);
transform:translateX();(X轴上的位移)
transform:translateY();(Y轴上的位移)
transform:translateZ();(Z轴上的位移)
注意: z不能为百分比。
rotate()3D旋转使用方法:
transform:rotate3d(x,y,z,a);(建议取值0或1,0不旋转,1旋转)
x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
transform:rotateX();(数值为度60deg为60度)
transform:rotateY();(数值为度60deg为60度)
transform:rotateZ();(数值为度60deg为60度)
scale()3D缩放
使用方法:
transform:scale3d(x,y,z);(缩放比例)
transform:scaleX();(X轴上的缩放)
transform:scaleY();(Y轴上的缩放)
transform:scaleZ();(Z轴上的缩放)
注意:
默认值为1,大于1为放大,小于1大于0为缩小;
单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果
.circle1 {
transform: translateZ(500px);
}
.circle2 {
transform: rotateY(36deg) translateZ(500px);
}
.circle3 {
transform: rotateY(72deg) translateZ(500px);
}
.circle4 {
transform: rotateY(108deg) translateZ(500px);
}
.circle5 {
transform: rotateY(144deg) translateZ(500px);
}
.circle6 {
transform: rotateY(180deg) translateZ(500px) ;
}
.circle7 {
transform: rotateY(216deg) translateZ(500px);
}
.circle8 {
transform: rotateY(252deg) translateZ(500px);
}
.circle9 {
transform: rotateY(288deg) translateZ(500px);
}
.circle10 {
transform: rotateY(324deg) translateZ(500px);
}
@keyframes run {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
以上是代码段分解跟知识点讲解:下面是完整代码敬上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画2</title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置可视窗口的宽高 */
body {
width: 100vw;
height: 100vh;
position: relative;
background-color: pink;
}
.container {
position: absolute;
width: 1000px;
height: 500px;
top: 15%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}
.box {
width: 150px;
height: 150px;
position: relative;
transform-style: preserve-3d;
animation: run 10s linear infinite;
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
/*设置图像大小、边框、圆角、位置*/
.circle img {
width: 200px;
height: 150px;
border: 1px solid #ccc;
border-radius: 10px;
box-sizing: border-box;
}
.circle1 {
transform: translateZ(500px);
}
.circle2 {
transform: rotateY(36deg) translateZ(500px);
}
.circle3 {
transform: rotateY(72deg) translateZ(500px);
}
.circle4 {
transform: rotateY(108deg) translateZ(500px);
}
.circle5 {
transform: rotateY(144deg) translateZ(500px);
}
.circle6 {
transform: rotateY(180deg) translateZ(500px);
}
.circle7 {
transform: rotateY(216deg) translateZ(500px);
}
.circle8 {
transform: rotateY(252deg) translateZ(500px);
}
.circle9 {
transform: rotateY(288deg) translateZ(500px);
}
.circle10 {
transform: rotateY(324deg) translateZ(500px);
}
@keyframes run {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
</style>
<body>
<div class="container">
<div class="box">
<div class="circle circle1">
<img src="./img/QQ图片20221114190101.jpg" alt="">
</div>
<div class="circle circle2">
<img src="./img/QQ图片20221114190057.jpg" alt="">
</div>
<div class="circle circle3">
<img src="./img/QQ图片20221114190053.jpg" alt="">
</div>
<div class="circle circle4">
<img src="./img/QQ图片20221114190048.jpg" alt="">
</div>
<div class="circle circle5">
<img src="./img/QQ图片20221114190044.jpg" alt="">
</div>
<div class="circle circle6">
<img src="./img/QQ图片20221114190038.jpg" alt="">
</div>
<div class="circle circle7">
<img src="./img/QQ图片20221114190014.jpg" alt="">
</div>
<div class="circle circle8">
<img src="./img/QQ图片20221114190008.jpg" alt="">
</div>
<div class="circle circle9">
<img src="./img/QQ图片20221114190002.jpg" alt="">
</div>
<div class="circle circle10">
<img src="./img/QQ图片20221114185953.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
下面是效果展示:
css实现3d旋转照片墙文章来源:https://www.toymoban.com/news/detail-789532.html
以上就是实现3D照片墙的代码了,感兴趣的小伙伴可以试一试,后续我还会更新更多关于前端的有趣案例,关注不迷路!文章来源地址https://www.toymoban.com/news/detail-789532.html
到了这里,关于如何用css实现一个3D旋转照片墙的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!