css3D效果的实现(透视的简单了解)

本文探讨了如何使用CSS的transform-style和backface-visibility属性创建3D效果,以及perspective属性实现透视感。详细讲解了动画制作流程,包括@keyframes定义动画序列,animation属性的应用,如animation-name, animation-duration等,以及帧动画的概念。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

3D效果

tramsform-style: preserve-3D;保留3D效果;
backface-visibility 设置元素背面是否可见;
在这里插入图片描述

透视

perspective:透视(添加给父元素)
电脑是2D 平面,图像之所以具有立体感(3D 效果),其实只是一 种视觉干扰,通过透视可以实现此目的。
透视可以将 2D 平面,在转换的过程当中,呈现 3D 效果。当然并不是所有情况都需要透视。
值越小,透视越大,值越大,透视越小;

动画

a、通过@keyframes 指定动画序列;
b、通过百分比将动画序列分割成多个节点;(from与to定义单动画)
c、在各节点中分别定义各属性 ;
d、通过 animation 将动画应用于相应元素;
属性
animation-name 设置动画序列名称
animation-duration 动画持续时间
animation-delay 动画延时时间
animation-timing-function 动画执行速度,linear、ease 等
animation-play-state 动画播放状态,running、paused 等
animation-direction 动画逆播,alternate (相反方向)
animation-fill-mode 动画执行完毕后状态,forwards(结束前状态)、backwards(结束后状态)
animation-iteration-count 动画执行次数,inifinate(永久性)
帧动画: steps(60) 表示动画分成 60 步完成参数值的顺序
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值