transform动画效果

Ahonens

已于 2023-04-22 11:30:23 修改

阅读量525

点赞数 1

文章标签： css css3 前端

于 2023-04-21 00:29:15 首次发布

本文链接：https://blog.csdn.net/2301_76858876/article/details/130278752

版权

本文详细介绍了CSS3中的transform属性，特别是translate、rotate和scale的使用，以及如何通过这些属性实现页面元素的居中、旋转和缩放效果。同时，文章探讨了transform的旋转点设置，并给出了相关的小案例，帮助理解transform的实战应用。此外，还提到了animation的样式过渡概念，对比了它与transform的区别。

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

animation

在这里插入图片描述

1.translate

在这里插入图片描述

transform：是转换，描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix，而其中的位移的函数名叫translate，所以说，translate是transform的一部分。并且也不改变盒子之前的布局。在CSS中通常与hover一起使用。
transition：是样式过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的动效。而transform是没有动画效果，你改变了它的值，元素的样子就改变了。这个元素通常与js相配合使用。

translate实现页面居中效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>translate</title>
    <style>
        div {
     
            position: relative;
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
        }

        .p {
     
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            background-color: blue;
            
            /* margin-top: -100px;
            margin-left: -100px; */
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div>
        <div class="p"></div