css平面转换

最新推荐文章于 2024-07-19 15:50:46 发布

Gxbfeng

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量88

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_51757999/article/details/125615343

版权

一.平移

1.transform: translate(水平移动距离, 垂直移动距离)

单独设置某个方向的移动距离：translateX() & translateY()

translate()如果只给出一个值, 表示x轴方向移动距离

2.取值

像素单位数值

百分比（参照物为盒子自身尺寸）

3.实例

<!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>
        .box{
            border: 2px solid black;
            width: 400px;
            height: 300px;
            margin: 0 auto;
        }
        .heart{
            transition: all 0.5s;
            width: 100px;
            height: 80px;
            background-color: aqua;
            
        }
        .box:hover .heart{
            /* transform: translate(100px,100px); */
            /* 百分比：盒子自身的百分比 */
            /* transform: translate(-50%,-50%); */
            /* 只给出一个值表示x轴移动距离或者translateX() */
            /* transform: translate(300px); */
            /* translateY()表示沿着y轴移动的距离 */
            transform: translateY(100px);
        }
    </style>
</head>
<body>
    <div class="box">
    <div class="heart"></div>
    </div>
</body>
</html>

二、旋转

1.transform: rotate(角度)

单位：deg

取值：

取值为正, 则顺时针旋转

取值为负, 则逆时针旋转

实例：

<!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>
        img{
            width: 123px;
            height: 123px;
            transition: all 2s;
           
        }
        img:hover{
           
            transform: rotate(-360deg);
            
        }
    </style>
</head>
<body>
    <img src="rotate.png" alt="">
</body>
</html>

2.transform-origin: （原点水平位置原点垂直位置）改变转换原点

取值：方位名词（left、top、right、bottom、center）

实例：

<!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>
        img{
            width: 300px;
            height: 300px;
            transition: all 2s;
            transform-origin: right bottom;
        }
        img:hover{
         
            transform: rotate(-360deg);
        }
    </style>
</head>
<body>
    <img src="rotate.png" alt="">
</body>
</html>

三、transform复合属性

transform:translate() rotate() ;

实例：

<!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>
        .box{
            width: 800px;
            height: 200px;
            border: 1px solid black;
            margin:  0 auto;
        }
        img{
           width: 200px;
           transition: all 8s;
        }
        .box:hover img{
            /* 向右平移600px，旋转360度 */
            transform:translate(600px) rotate(360deg) ;
        }
    </style>
</head>
<body>
 <div class="box">
<img src="tyre.png" alt="">
 </div>   
</body>
</html>

四、放缩

transform: scale(x轴缩放倍数, y轴缩放倍数);

取值：

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

transform: scale(缩放倍数);

scale值大于1表示放大, scale值小于1表示缩小

实例：

<!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>
        .box{
            width: 400px;
            height: 400px;
            background-color: aqua;
        }
        .box img{
            width: 100%;
            transition: all 0.5s;
        }
        .box:hover img{
            transform: scale(1.6);
        }
    </style>
</head>
<body>
  <div class="box">
<img src="product.jpeg" alt="">
  </div>  
</body>
</html>

Gxbfeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css平面转换

一.平移1.transform: translate(水平移动距离, 垂直移动距离)单独设置某个方向的移动距离：translateX() & translateY()translate()如果只给出一个值, 表示x轴方向移动距离2.取值像素单位数值百分比（参照物为盒子自身尺寸）3.实例二、旋转1.transform: rotate(角度)单位：deg取值：取值为正, 则顺时针旋转取值为负, 则逆时针旋转实例：2.transform-origin: （原点水平位置原点垂直位置）改变转换原点取值：
复制链接

扫一扫