初识css3 3d动画效果 (2)

另外,有的同学会看到还有这个属性transform-origin,这个其实就是定义你旋转的时候是以什么位置来旋转的(是中心位置旋转还是面的某一边或者其他位置,

默认就是中心位置)。还有就是大家在调试的时候,有时候前面的面会挡住侧面和后边,导致你看不到效果,可以把前面的面display none掉,或者设置

perspective-origin来调整你观看者的角度,这样可以看到一些你旋转90度导致刚好面看不到的面。

 

上面实现了盒子模型的组装。剩下就是对ul模型进行动画的定义了,

@keyframes move {
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(-360deg);
}
}

上面就是定义模型 沿着 y轴旋转一周

然后对ul增加 

animation:move 3s linear 0s infinite normal;

move 动画名称 

3s   动画完成一次总共需要多久

linear 动画速度匀速

0s  动画延迟秒数(页面加载完即可运行)

infinite  动画的运动次数(无限,或者 具体次数)

normal  规定是否应该轮流反向播放动画(如果你定义动画次数大于1次,就存在第一次运行完,动画是按照第一次顺序顺序运行完还是逆序运行)

以上基本算完成了基本的3d盒子动画效果了

大家对3d盒子模型部分参数还不太理解的,有个网友做了一个很好的示例说明perspective的概念,然后自己多测试下参数

或者看看我参考的2个资料地址

另外我又写了2个demo ,加起来总共3个,后面有空再更新玩玩

地址1   地址2   地址3

不是1024地址啊,不要误会!!!其中第三个旋转的多边形我也是参考 上面第二篇博文来做的(三角函数都忘光了)。

第三个地址是9边形,大家可以脑洞下,如果是 好几十边形。并且每个面是一张图的平均分割出来的背景图,再调整perspective

是不是就可以实现类似淘宝造物节(手机微信下看)的那个炫酷的3d效果了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxswz.html