css3 动画、变形、平移

最新推荐文章于 2025-08-10 23:55:17 发布

原创

最新推荐文章于 2025-08-10 23:55:17 发布 · 931 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#2d #3d #css3

本文详细介绍了CSS3中的过渡、2D和3D变形，包括平移、旋转、缩放、倾斜等。重点讲解了transition属性的使用，以及transform如何实现2D和3D变换，如translate3d和rotate3d。同时提到了transform-origin用于改变旋转基点，以及perspective属性为创建3D效果提供景深。最后，简要提及了CSS3动画的定义和使用。

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

过渡

transition: 要过渡的属性持续的时间过渡的运动曲线延时时间
transition-property: 过渡的属性
transition-duration: 持续的时间
transition-timing-function:linear; 过渡的运动曲线
transition-delay: 延迟时间；

注：过渡只能过渡有具体值得属性。
多属性：1. all …
2. 分别写出要过渡的属性以及其他参数中间以逗号隔开。

变形

1.2D 变形 transform : translate (平移) +x 右 +y 下
rotate (旋转) 默认中心旋转点 transfor-origin:;（改变旋转基点）
scale （缩放）
skew （倾斜）

盒子居中第三种：transform:translate(-50%,-50%);
多边形属性：多个属性变形各属性值空格隔开。
注：多属性变形是，最好先写其他属性在写旋转属性。

<style>
        .box{
            width:300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            background-color:teal;
            transition: all 3s  linear;
            
        }
       
        .box:active{
         
           transform: translate(500px) rotate(360deg);
           
        } 
    </style>
</head>
<body>
    <div class="box">