CSS3新特性-transform2D转换

最新推荐文章于 2023-03-13 14:15:06 发布

杨蛋蛋~R

最新推荐文章于 2023-03-13 14:15:06 发布

阅读量224

点赞数

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

本文链接：https://blog.csdn.net/weixin_50119334/article/details/109542754

版权

CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

2D转换

2D转换之移动translate

（移动盒子的位置方法：定位、盒子的外边距、2d转换移动）
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法
transform: translate(x,y);
或者分开写:
transform:translatex(n);
transform:translateY(n);
重点
(1)定义2D转换中的移动，沿着x和Y轴移动元素
(2)translate最大的优点:不会影响到其他元素的位置，（京东商城中鼠标经过图片上下浮动就是用这个做的）
(3)translate中的百分比单位是相对于自身元素的translate:(50%,50%);
(4)对行内标签没有效果

transform实现盒子水平居中

       .box {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: palegreen;
        }
        
        .inner {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            background-color: rgb(201, 53, 188);
            transform: translate(-50%, -50%);
        }

关于盒子实现垂直居中、水平居中，我整理了几个方法，见文章

2D转换之旋转rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法
transform: rotate(度数)
重点
(1)rotate里面跟度数，单位是deg比如rotate(45deg)
(2)角度为正时，顺时针，负时，为逆时针
(3)默认旋转的中心点是元素的中心点

    .box {
            width: 500px;
            height: 500px;
            background-color: palegreen;
            transition: all 0.3s;
            /* 设置过渡，谁做动画给谁加 */
        }
        
        .box:hover {
            transform: rotate(45deg);
            /*鼠标经过，盒子顺时针旋转45度*/
        }

在盒子内部实现一个小三角

      div {
            position: relative;
            width: 250px;
            height: 30px;
            border: 1px solid black;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 8px;
            width: 15px;
            height: 15px;
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            transform: rotate(45deg);
            transition: all 0.3s;  /*设置过渡，谁做动画给谁加*/
        }
        /* 鼠标经过div，里面的三角旋转 */
        div:hover::after {
            transform: rotate(225deg);
            /*本来是45度，再旋转180度，就是225度*/
        }
   <body>
        <div></div>
   </body>

效果如图：
在这里插入图片描述

2D转换之设置旋转中心点transform-origin

我们可以设置元素转换的中心点
1.语法
transform-origin: x y;
2.重点
(1)注意后面的参数×和y用空格隔开
(2)xy默认转换的中心点是元素的中心点(50%50%)
(3)还可以给xy 设置像素或者方位名词( top bottom left right center )

      div {
            width: 200px;
            height: 200px;
            background-color: palegreen;
          }
        
        div:hover {
            /* 可以是方位名词，以下为旋转点为左下角 */
            /* 默认的是50% 50% , 等价于center center */
            transform-origin: left bottom;
            transform: rotate(45deg);
            /* 也可以是像素 */
            transform-origin: 50px 50px;
        }

旋转案例
鼠标旋转后，内部的div从左下角旋转上来

     .box {
            width: 200px;
            height: 200px;
            background-color: cadetblue;
            margin: 100px auto 0 auto;
            overflow: hidden;
        }
        
        .box::before {
            content: "";
            width: 100%;
            height: 100%;
            background: coral;
            text-align: center;
            line-height: 200px;
            font-size: 18px;
            color: cornsilk;
            font-weight: 700;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.6s;
        }
        
        .box:hover::before {
            content: "旋转";
            display: block;
            transform: rotate(0deg);
        }
    </style>
</head>

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

效果：
在这里插入图片描述

2D转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法
transform: scale(x,y)
注意
(1)注意其中的x和y用逗号分隔
(2)transform:scale(2,2)∶宽和高都放大了2倍
(3)transform:scale(0.5,0.5):缩小
(4)transform:scale(1,1):宽和高都放大一倍，相对于没有放大
(5)transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
(6)sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
图片放大案例

   div {
            width: 200px;
            height: 200px;
            margin: 10px;
            float: left;
        }
        
        img {
            width: 100%;
            height: 100%;
            transition: all 0.3s;
        }
        
        div:hover img {
            transform: scale(1.1);
        }
  
    <div><img src="image.jpg" alt=""></div>
    <div><img src="image.jpg" alt=""></div>
    <div><img src="image.jpg" alt=""></div>