• 一文速通 css3 2D转换【内含开发常用效果实现】

    📋 个人简介

    • 💖 作者简介：大家好，我是阿牛，全栈领域优质创作者😜
    • 📝 个人主页：馆主阿牛🔥
    • 🎉 支持我：点赞👍+收藏⭐️+留言📝
    • 📣 系列专栏：软磨 css🍁
    • 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥

    请添加图片描述

    目录

    前言

    关于css这个专栏好久没更新了，对于动画这块也是大家最感兴趣的，我打算花时间将这个css动画写一下吗，这一节先总结一下2d转换吧，然后附带着写一写相关案例，都是开发中常见的效果哦，干货满满，赶紧收藏吧！

    2D转换之移动 translate

    2D移动是2D转换里面的种功能，可以改变元素在页面中的位置，类似定位。
    1.语法

    transform : translate ( x , y );或者分开写
    transform : translateX ( n );
    transform : translateY ( n );

    2.重点

    • 2D转换中的移动，沿着 x 和 Y 轴移动元素
    • translate 最大的优点：不会影响到其他元素的位置
    • translate 中的百分比单位是相对于自身元素的 translate :(50%,50%);
    • 对行内标签没有效果。

    案例-盒子垂直居中

    其实这里经常用这个结合定位实现一个盒子的垂直居中，之前的博文我们实现这个是用margin来实现的，因此要考虑到当前盒子的宽高，但是用translate则不用考虑，直接50%就行。

    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>Documenttitle>
    <style>
        .big{
            position: relative;
            border: 2px solid blue;
            width: 400px;
            height: 400px;
        }
        .big .small{
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            background-color: red;
            transform: translate(-50%,-50%); /*想左边和上边移动自身宽高的一半实现居中*/
        }
    style>
head>
<body>
    <div class="big">
        <div class="small">div>
    div>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    在这里插入图片描述

    案例-鼠标移动到图片上图片向上抖动效果

    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>Documenttitle>
    <style>
        div{
            float:left;
            margin-left: 10px;
            margin-top: 100px;
        }
        img{
            display: block;
            width: 200px;
            transition: all 0.2s; 


    
    
    
    Document