CSS / css3动画知识

一、3D动画的坐标轴方向

二、 perspective:透视角,设置从何处查看一个元素的角度 (通常与perspective-origin

      (1)值:perspective: number|none,

            number:元素距离视图的距离,以像素计。

            none:默认值,与 0 相同,不设置透视。

      (2)属性:3D立体视图的可视效果,近大远小

      (3)实现方式

           方式一:写在所有的动画元素的父元素上

.parentSrtyle{
    perspective: 700px;
}

            方式二:写在当前元素上

#parentStyle .childrenStyle {
    transform: perspective(600px) rotateY(45deg);
}

三、perspective-origin:看的位置

四、transform-style 设置效果  flat|preserve-3d

      flat:平面,2D效果

     preserve-3d:3D效果

五、transform属性

  • translate(平移): 
  1.  translate(x轴平移的值,y轴平移的值,z轴平移的值)(2D的效果去掉z轴),
  2. translateX(绕x轴平移的值),
  3. translateY(绕y轴平移的值),
  4. translateZ(绕Z轴平移的值)
  • rotate(旋转):
  1. rotate(x轴旋转的值,y轴旋转的值,z轴旋转的值)(2D的效果去掉z轴),
  2. rotateX(绕x轴旋转的值),
  3. rotateY(绕y轴旋转的值),
  4. rotateZ(绕Z轴旋转的值)
  • scale(缩放):
  1. scale(x轴缩放的值,y轴缩放的值,z轴缩放的值)(2D的效果去掉z轴),
  2. scaleX(绕x轴缩放的值),
  3. scaleY(绕y轴缩放的值),
  4. scaleZ(绕Z轴缩放的值)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值