css3中的景深,3d,和动画效果

在css3中添加了:

景深属性,表现为远小近大 100px~1200px(在其中参数选择整百的进行调整,建议为1200px,效果比较的好)

        1.可以在父级元素上添加 perspective:1200px(会为旋转的属性提供一部分远大近小的效果)

        2.可以在子级元素上添加transform:perspective(1200px) (因为一般都是需要旋转属性的,所以如果添加在子级元素的上的话会造成属性覆盖 所以推荐在父级添加)

3d属性,要结合上次的2d属性来进行谈论,在2d时候只是有着x和y轴,在进行旋转的时候只是按照着x轴或者y轴来进行旋转的   3D属性添加了全新的Z轴,一条虚拟的,往用户方向延升的z轴

如果是想要有着3d效果的话需要在父级元素添加样式修改

属性:transform-style

属性值:flat(2D空间,默认为该属性值)

属性值:preserve-3d(形成3d空间,多了一条z轴)

位移,旋转都和2d一样,

位移的功能函数为translate()多了一个z轴

旋转的功能函数为rotate()多了一个z轴

旋转的功能函数transform:rotate3d(矢量值,矢量值,矢量值,角度值) 矢量值为0和1

多个功能函数写在一起的时候,要用空格隔开

    帧动画在项目中如果使用

    定义/声明帧动画  

    动画是属于css样式 需要在css样式表中进行定义

    @keyframes 动画的名字(可以自己进行定义)

     注意:

     动画名字是需要自定义的(取名要规范 语义化)

     运动方式

     一次/单次运动 开始位置结束位置 from...to..

      多次/循环的运动 从一个位置到另外一个位置重复的运动 分解为百分比

 1.动画的名字 animation-name

<