CSS3中动画变换

最新推荐文章于 2021-03-06 16:46:43 发布

原创最新推荐文章于 2021-03-06 16:46:43 发布 · 848 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文详细介绍了CSS中的2D与3D变换技术，包括translate、rotate、scale和skew等函数的使用方法及实例。同时，还探讨了transform-origin属性的作用以及如何通过transition实现过渡效果。

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

2D动画

在CSS中提供了transform和transform-origin两个用于实现2D变换的属性。其中transform属性用于实现平移、缩放、旋转和倾斜等2D变换，而transform-origin属性则用于设置变换的中心点。

translate函数

利用translate函数可以实现2D平移。

基本语法：
` -webkit-transform: -webkit-transform: translate(100px,200px);
-moz-transform: translate(100px,200px);
-ms-transform: translate(100px,200px);
-o-transform:translate(100px,200px);
transform: translate(100px,200px);/（水平偏移垂直偏移）/
效果如下：
这里写图片描述
也可实现在X轴或Y轴单方向的平移，语法如下：

transform:translateX(200px);/*水平偏移*/
transform:translateY(200px);/*垂直偏移*/

效果如下：
水平偏移

垂直偏移

其参数值可正可负，X轴为正值是代表向右移动，为负值是代表向左移动；Y轴为正值是代表向下移动，为负值是代表向上移动。

rotate函数

rotate函数可以实现2D旋转。

基本语法：
-webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg);/*旋转:(angle)*/
效果如下：
这里写图片描述

参数angle值可正可负，正值代表顺时针旋转，负值代表逆时针旋转。在使用该函数之前，可以应用transform-origin属性定义变换的中心点。

scale函数

scale函数可以实现2D缩放。

基本语法：`-webkit-transform: scale(2,4);/（水平发大倍数，垂直放大倍数）/
-moz-transform: scale(2,4);
-ms-transform: scale(2,4);
-o-transform: scale(2,4);
transform: scale(2,4);/缩放：0-1 缩小；大于1 放大/
效果如下：
这里写图片描述

如果只指定一个参数，那么在X轴和Y轴都缩放参数所指定的比例，语法如下；
-webkit-transform: scale(2);/水平垂直都放大相同倍数，可只写一值/`
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
缩放：0-1 缩小；大于1 放大；负数反转；为1 不缩放
效果如下：
这里写图片描述

skew函数

skew函数可以实现2D倾斜。

基本语法：
`-webkit-transform: skew(40deg,20deg);
-moz-transform: skew(40deg,20deg);
-ms-transform: skew(40deg,20deg);
-o-transform: skew(40deg,20deg);
transform: skew(40deg,20deg);/倾斜：（水平倾斜角度，垂直倾斜角度）/
效果如下：

这里写图片描述

也可实现在X轴或Y轴单方向的倾斜，语法如下：

 transform:skewX(20deg);/*水平倾斜*/
transform:skewY(20deg);/*垂直倾斜*/

效果如下：
水平倾斜

垂直倾斜

transform-origin属性

transform-origin属性可以更改变换的中心点
常用基本语法：
transform-origin:right bottom;/*以右下点为中心点*/ transform-origin:80% 50%;/*指定某个点为中心点*/

过渡效果

transition属性

transition可以控制HTML元素的某个属性发生改变时经历的时间，并且以平滑渐变的方式发生改变，从而形成动画效果。
基本语法：

transition:property duration timing-function delay;/*过渡属性 过渡持续时间 过渡类型 延迟过渡时间*/

其中过渡类型有以下几种：

linear 线性过渡，即匀速过渡。
ease 平滑过渡，过渡的速度会逐渐慢下来。
ease-in 由慢到快，即逐渐加速。
ease-out 由快到慢，即逐渐减速
ease-in-out 由慢到快再到慢，即先加速后减速。
cubic-bezier(x1,y1,x2,y2) 特定的赛贝尔曲线类型

3D变换

transform:rotateX/rotateY(angle);可实现3D变换。
下面举个栗子：
部分代码如下：

 <style>
        div{
            height:100px;
            width:100px;
            background: #ffc2a8;
            transition:.5s;/*默认以0.5s的速度匀速变换*/
        }
        div:hover{
            width:400px;
            background:yellow;
            transform: rotateX(180deg);/*3D动画效果*/
        }
    </style>
</head>
<body>
<div>hello</div>
</body>

自定义动画

keyframe为自定义动画，其有连个步骤：

创建一个动画
调用该动画

下面我们来说如何创建动画，格式如下：

@keyframes abc{ from{ background:yellow;} to{ background: blue; } }

2.@keyframes abc{ 0%{ background:yellow; border-radius:50%;} 25%{ background:lightpink; transform:translate(400px,0); border-radius:50%;} 50%{ background:palegreen; transform:translate(400px,400px); border-radius:50%;} 75%{ background:firebrick; transform:translate(0px,400px); border-radius:50%;} 100%{ background: blueviolet; transform:translate(0,0); border-radius:50%;} }
那么我们完成了自定义动画，怎么来调用它呢？这时我们就需要用到animation了，我们可以在style中写：

div:hover{animation:abc 1s linear};/*abc为上面自定义动画的名字*/

下面做了两个小效果(^__^) ,部分代码如下：

<head>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .box{
            height:250px;
            width:346px;
            margin:300px auto 0;
            position: relative;
            overflow: hidden;
        }
        .box img{
              transition:0.5s;
          }
        .box:hover img{
            transform:scale(1.2);
        }
        .box .title{
            height:250px;
            width:346px;
            background:rgba(255,255,255,.3);
            position: absolute;
            right: 0;
            top:0;
            transition: 0.5s;
            padding:20px;
            transform-origin: right bottom;
            transform:rotate(90deg);
        }
        .box:hover .title{
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
<div class="box">
    <img src="img-1.jpg" alt=""/>
    <div class="title">

        <p>title1
            <br>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda commodi consectetur dolor doloremque doloribus dolorum, ea enim harum iste molestias natus odit officia quo, recusandae repellat suscipit, ullam ut!
        </p>
    </div>
</div>
</body>

<head>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .box{
            height:250px;
            width:346px;
            margin:300px auto 0;
            position: relative;
            overflow: hidden;
        }
        .box img{
            transition:0.5s;
        }
        .box:hover img{
            transform:scale(1.2);
        }
         .box .title{
            height:250px;
            width:346px;
            background:rgba(255,255,255,.3);
            position: absolute;
            left: -346px;
            top:0;
            transition: 0.5s;
            padding:20px;
        }
        .box:hover .title{
            transform: translateX(346px);
        }
    </style>
</head>
<body>
<div class="box">
    <img src="img-1.jpg" alt=""/>
    <div class="title">

        <p>title1
            <br>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda commodi consectetur dolor doloremque doloribus dolorum, ea enim harum iste molestias natus odit officia quo, recusandae repellat suscipit, ullam ut!
        </p>
    </div>
</div>
</body>