抖音3d旋转相册教程(抖音的3d旋转视频怎么做的?)

前言前段时间边肖刷Tik Tok的时候，我刷了我们前端朋友做的3D酷炫相册。天气太热了。想想吧。随着3D动画的普及，在各个平台被广泛使用，各官网都在实现3D页面。可以更贴近我们产品和介绍的真实展示，带来强烈的视觉冲击感。所以，要想更好，css3 3D动画必不可少。下面这篇文章将带你初步了解CSS3酷炫的3D旋转透视。
如果你想让你的网页有3D特效，你必须能看穿。
视角(基础题，可以在我推荐的书中学到)
在2D平面中，产生了视觉立体，但是效果仅仅是二维的。如果你想在网页上生成3D效果，你需要透视(据了解，3D物体是投影在2D平面上的)。模拟人类的视觉位置，可以认为安排一只眼睛看透视也叫视距：视距是人眼与屏幕之间的距离。眼睛离视点越近，电脑平面上的图像越大，越远图像越小。透视的单位是像素。
图像源网络
正文：CSS3 3D转换通用API介绍；CSS3 3D的应用场景；立方体的实现；1.CSS3三维转换通用API介绍
首先，取一个css 3D的坐标系：
接下来，我们来介绍几种常用的API:
辐状的
RotateX()rotateY()rotateZ()以上API分别表示绕X、Y、Z轴的旋转。以下示例是绕X轴旋转的示例：
相关代码如下：
复制代码转换
TranslateX(x)定义3D变换，仅使用x轴的translateY(y)值、y轴的translateZ(z)值和z轴的值。上述API分别表示相对于x、y和z轴的位移。以下示例是向z轴位移的示例：
这里我们需要注意的是，为了查看置换的效果，我们需要向父容器添加以下属性：
. D3-wrap { transform-style : preserve-3d；透视： 500；/*设置查看元素的视图*/-WebKit-perspective 3360 500；}当为一个元素定义了perspective属性时，它的子元素会得到透视效果，而不是元素本身。代码如下：
. D3-wrap { position : relative；宽度： 300 px；height: 300pxmargin: 120px autotransform-style : preserve-3d；透视： 500；-WebKit-perspective : 500；transform : rotateX(0)rotateY(45度)；transform-origin : center center；}.transformZ { width: 200pxheight: 200px背景色： # 06c；transition:转换2s；animation: transformZ 6s无限；} @ key frames transformZ { 0% { transform : translate z(100px)；} 100% { transform : translate z(0)；} }3D缩放
ScaleX(x)给定一个X轴的3D缩放转换值scaleY(x)给定一个Y轴的3D缩放转换值scaleZ(x)给定一个Z轴的3D缩放转换值，缩放设置和上面的差不多，这里就不多介绍了。理论上，以上三种常见的变换就足够了。值得注意的是，如果我们想让元素呈现3D效果，下面这个不可忽视的API也很重要：
2.CSS3 3D应用场景
CSS主要用于网站的交互和模型效果，比如：
3D轮播图3D产品介绍室内3D模拟h5 3D活动页面，典型的某年淘宝年终总结。H53D数据被可视化为3D模型图。事实上，如果你熟悉css 3D，一些基本的3D模型都可以用css绘制。3.CSS3 3D实现了一个立方体。
核心思想是使用六个面进行拼接，并通过设置旋转和平移来调整彼此的位置，如下所示：
具体代码如下：容器{相对位置：宽度： 300 pxheight : 300 px margin : 120 px自体输血式： preserve-3d；/* 为了让其更有立体效果*/转换： rotateX(-30度)罗泰(45度);变换-原点： 150 px 150 px 150 px动画：旋转6s无限；}.集装箱。绝对位置：页；宽度： 300 px高度： 300pxtext-align:居中；行高： 300 pxcolor: # fff背景尺寸：封面；}.集装箱。第：页第一个孩子{ background-image : URL ./我的。JPEG)；背景色： rgba(0，0，0，2);}.集装箱。第：页第n子(2){变换： rotateX(90度)；转换-原点： 0；中转：变换10s背景色： rgba(179，15，64，0.6)；背景图片：网址./my2。JPEG)；}.集装箱。第：n页th-child(3){ transform : translate z(300 px)；背景色： rgba(22，160，137，0.7)；背景图片：网址./my3。JPEG)；}.集装箱。第：页第n子(4){ transform : rotateX(-90度)；变换-原点：-300 px 300 px；背景色： rgba(210，212，56，0.2)；背景图片：网址./my4。JPEG)；}.集装箱。第：页第n个孩子(5){变换：旋转(-90度)；转换-原点： 0；背景色： rgba(201，23，23，0.6)；背景图片：网址./my5。JPEG)；}.集装箱。第：页th-child(6){ transform : rotateY(-90 deg)translate z(-300 px)；变换-原点： 0 300 px背景色： rgba(16，149，182，0.2)；背景图片：网址./my6。JPEG)；}html结构
A
B
C
D
E
F
扩展
我们可以基于上面介绍的，给父元素添加动画或者拖拽效果，这样就可以做成更有交互性的三维(三维的缩写)方块了，比如置骰子游戏，vr场景，3D相册等等，具体实现我会抽空依次总结出来，记得关注哦~
作者：徐小夕_实验室实验室链接：金爵https://号。BCA 78958 e
喜欢小编的可以点个赞关注小编哦，小编每天都会给大家分享文章。
我自己是一名从事了多年的前端老程序员，小编为大家准备了新出的前端编程学习资料，免费分享给大家！
如果你也想学习前端，那么帮忙转发一下然后再关注小编后私信【1】可以得到我整理的这些前端资料了（私信方法：点击我头像进我主页有个上面有个私信按钮)