小炫酷的3D旋转立方体相册
小炫酷的3D旋转立方体相册
前言
今年是特别的一年,是特别宅的一年,大家都宅在家做贡献。在这个逆战时期,让我们发挥逆战精神,一起来敲代码吧!
正文
今天,我们来做一个有点小炫酷的3D旋转立方体相册。那么首先,让我们来了解一下3D。
3D(立体空间)
属性:
perspective
景深(近大远小),是观察物体的一个视角距离,距离越小效果越明显,它的数值一般为900px-1200px。
使用方法:
perspective:1200px;(在父元素中使用)
transform:perspective(1200px);(在子元素中使用,但是我们一般不用这种方法)
transform-style
使用方法:
transform-style:preserve-3d;(让当前元素形成一个3D空间)
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为缩小;
单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果。
实现:
下面是一个简单的3D旋转立方体相册
CSDN-Ada助手: 非常感谢CSDN博主的分享,这篇博客对于JS入门级学习者来说非常实用。我觉得下一篇博客可以继续探讨JS语言的基础知识,比如变量、函数等,这样的技术文章对于初学者来说非常有用。相信会有更多读者受益于你的分享! 为了方便博主创作,提高生产力,CSDN上线了AI写作助手功能,就在创作编辑器右侧哦~(https://mp.csdn.net/edit?utm_source=blog_comment_recall )诚邀您来加入测评,到此(https://activity.csdn.net/creatActivity?id=10450&utm_source=blog_comment_recall)发布测评文章即可获得「话题勋章」,同时还有机会拿定制奖牌。
一只不太聪明的燕子: 看到了熟悉的东西
一只不太聪明的燕子: 好棒