3D立体相册 html+css

最新推荐文章于 2025-04-17 11:45:18 发布

北极光之夜。

最新推荐文章于 2025-04-17 11:45:18 发布

阅读量8.0k

点赞数 45

分类专栏：前端大杂烩 css 创意特效大全文章标签： css3 css html

本文链接：https://blog.csdn.net/luo1831251387/article/details/111032274

版权

前言

用css的transform属性做一个3D相册~~~
值translate表示偏移；
scale表示缩放；
rotate就是转动。

一、先看效果

在这里插入图片描述

二、实现步骤

1.我们知道一个正方体有6个面，所以定义一个父亲元素然后定义6个子元素作为6个面。每个面放一张图片。里面q1表示前面，h2表示后面，以此类推，就是首拼音。

<div class="baba">
         <div class="q1"> <img src="3d/1q.png"> </div>
         <div class="h2"> <img src="3d/2h.png"> </div>
         <div class="z3"> <img src="3d/3z.png"> </div>
         <div class="y4"> <img src="3d/4y.png"> </div>
         <div class="s5"> <img src="3d/5s.png"> <