css3的高级特效 2D

晚风、@

已于 2022-03-30 15:23:09 修改

阅读量167

点赞数 2

分类专栏： css3 文章标签： css3 html5

于 2022-03-30 10:38:03 首次发布

本文链接：https://blog.csdn.net/m0_52943868/article/details/123838020

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、transform：translate（ a,b）这个平面图片x轴平移a y轴平移b( 不脱标)

代码如下：

<!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>Document</title>
    <style>
        div {
         
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            margin: 20px auto;
            background: url(./img7.gif) no-repeat;
            background-size: 300px 300px;
            transform: translate(40px, 80px);

        }
</head>

<body>
    <div>hahah</div>

</body>

</html>

如果括号内只写一个值则是移动x轴如果写百分比则是移动本身高度的百分比进行移动

2、利用移动让元素进行垂直水平居中：（后期常用）

代码如下：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 400px;
            height: 200px;
            background-color: blue;
            margin: 50px auto;
            position: relative;
        }

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

<body>
    <div class="box">
        <div class="near">

        </div>
    </div>

</body>

</html>

3、transfrom:rotate(ndeg ) （不脱标）ndeg代表多少度

/* 起点以x轴 10px y 轴120px 为原点 进行旋转*/
            transform-origin: 10px 120px;
            transform: rotate(10deg);

transform-origin:x 轴的距离，y轴的距离：如果不写则默认值是元素的左上角的距离。

4、transform：scale（a,b）缩放：设定元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）的参数:

缩放的默认原点为元素的正中心。如果想要改变则需要： tansform-origin:

 /* 缩放 scale  x轴放大二倍 y轴放大4倍*/
             transform: scale(2, 4);

如果让元素隐层可以用transform：sacle(0)

隐藏的方式还有 hidden ,display:none

5、transform：shew() ；倾斜设定元素翻转给定的角度，根据给定的水平线（X轴）和垂直线参数（Y轴）

  /* 2d倾斜  */
            transform: skew(10deg);

或者写成 transform：（x-ndeg，y-ndeg）；沿着x，y轴多少度进行倾斜。

注意：如果分开写 x y 轴不会同时生效

晚风、@

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录