景深效果&3D&动画属性使用

最新推荐文章于 2022-10-17 19:26:14 发布

黎小兮～

最新推荐文章于 2022-10-17 19:26:14 发布

阅读量483

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_63608418/article/details/121690656

版权

本文介绍了如何在2D和3D空间中实现旋转效果，特别是通过设置`perspective`属性实现景深效果。同时，探讨了CSS3的3D变形属性，如`translate`和`rotate`在不同轴上的应用。此外，还讲解了关键帧动画的创建和使用，包括`@keyframes`的声明、动画属性的设置以及各种动画控制选项。

摘要由CSDN通过智能技术生成

2D中的旋转
X轴与Y轴

景深效果：远小近大 100~1200px
两种写法
    添加在父级元素上 perspective：1200px
    添加在子级元素上 transform:perspectice 1200px
        常用父级用法子级使用的时候会被覆盖
        景深效果在旋转中表示远小近大离浏览器的边框是靠近用户的说明是正值

浏览器默认的空间是2D空间只有X与Y轴没有Z轴
    Z轴是3D空间独有的要设置形成3D空间的属性
    形成3D空间属性：transform-style(在父级上添加)
        flat 默认值 2D空间
        preserve-3D 形成3D空间(多出一条Z轴但在浏览器的
        观察中是没有区别的)

CSS3 3D中的变形属性
    位移属性transform
        translate(x,y) X轴与Y轴进行移动
        translate X/Y/Z()
        translate 3D(x,y,z)

    旋转 transform
        rotate() 不写默认是Z轴
        rotateZ() 写与不写效果是一样的都表示Z轴方向
        rotateX/Y()
        rotate 3D(X,Y,Z矢量值，角度值)
            开关常用的矢量值0和1
            0：关闭 1：打开
拓展：
    backface-visibility:hidden(背面不可看)