3d正方体旋转相册

最新推荐文章于 2024-04-10 09:21:27 发布

SAKURE2210866448

最新推荐文章于 2024-04-10 09:21:27 发布

阅读量8.3k

点赞数 67

文章标签： css3 抖音相册 3d正方体前端动态相册

本文链接：https://blog.csdn.net/sakure2210866448/article/details/103108002

版权

本文介绍了如何使用CSS3的transform和animation属性制作一个3D正方体旋转相册。首先解释了获取六张图片构建正方体模型，然后通过HTML布局和CSS3变换设置立方体结构，最后添加动画效果使其旋转，形成一个抖音风格的动态相册。

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

参考链接：http://www.softwhy.com/article-9051-1.html

起因

事情的起因是这个样子的，作为中华好闺蜜，没理由让自己的小宝贝羡慕别人！！在这里插入图片描述

效果图

先看效果图，比较有动力~
在这里插入图片描述

思路

1.先死皮赖脸要六张图片，构成正方体结构。
2.写html搭建立方体模型。
3.加入动画。

涉及到的知识点

CSS3 transform变换，CSS3 animation 动画

transform

此属性是CSS3新增，transform翻译成汉语具有"变换"或者"改变"的意思。
通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果。

transform:translate3d(x,y,z)

参数解析：

（1）.x：表示在x轴方向的位移。

（2）.y：表示在y轴方向的位移。

（3）.z：表示在z轴方向的位移。

rotate3d(x,y,z,angle)

参数解析:

（1）.x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值。

（2）.y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。

（3）.z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。

（4）.angle：一个角度值，指定在3D空间旋转角度，正值顺时针旋转，反之元素逆时。

animation

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

参数解析：

（1）.animation-name：规定动画的名称，利用它可以与@keyframes关联起来。

（2）.animation-duration：规定动画的时长，时间是秒，比如5s。

（3）.animation-timing-function：规定动画的过渡类型，可以使用内置固定的关键字，也可以自定义数据。

（4）.animation-delay：规定动画开始前的延迟时间。

（5）.animation-iteration-count：规定动画的重复次数。

（6）.animation-direction：规定动画循环中是否会反向运动。

（7）.animation-fill-mode：规定对象动画时间之外的状态。

（8）.animation-play-state：规定动画是否正在运行或暂停。

蚂蚁部落（文章顶部参考链接），讲得很详细，这里只简单给出参数说明，如果还有困扰，这是直通车。

具体实现过程：

第一步

完成基本的HTML结构

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>小小鸿</title>
    <style>
    </style>
</head>

<body>
    <div>
        <ul>
            <li>
                <img src="images/1.jpg">
            </li>
            <li>
                <img src="images/2.jpg">
            </li>
            <li>
                <img src="

最低0.47元/天解锁文章

SAKURE2210866448

关注

67
点赞
踩
178

收藏

觉得还不错? 一键收藏
53
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫