CSS中变形transform属性—改变元素的形状或位置

最新推荐文章于 2024-07-10 10:04:49 发布

燕穗子博客

最新推荐文章于 2024-07-10 10:04:49 发布

阅读量1.9k

点赞数 2

分类专栏： CSS 文章标签： css java vscode javascript 开发语言

本文链接：https://blog.csdn.net/m0_64346035/article/details/124143048

版权

CSS 专栏收录该内容

49 篇文章 6 订阅

订阅专栏

本文介绍了如何使用CSS的transform属性来改变元素的形状和位置，实现元素的悬浮和居中效果。通过translate函数进行平移操作，不改变页面布局。示例代码展示了两种元素垂直居中的方法，并利用transition制作了卡片的悬浮动画效果。

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

变形是通过css来改变元素的形状或位置,可以做元素悬浮效果，以及元素居中设置，代码演示中有两种元素垂直居中的写法

—变形不会影响到页面的布局(只折腾自己)

—transform: ;用来设置元素的变形效果 ,尽量变形写在一个transform里，不然下面再写一个，就会覆盖上面

可选值：

translateX()沿着x轴方向平移

translateY()沿着y轴方向平移

translateZ()沿着z轴方向平移

—平移元素，可以是数字，可以是百分比，百分比是相对于自身计算的

<!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>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        transform: translateZ(50px);
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: orange;
        margin: 0 auto;
      }
      /* 需求 ： 使元素居中效果 */
      .box3 {
        background-color: red;
        /* 第一种方式居中 这种方式适用于宽高确定，如果不确定，会自动调整宽高的大小 */
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      .box4 {
        background-color: pink;
        position: absolute;
        /* 第二种居中方式   */
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
      }

      /* 需求二：作出卡片悬浮的效果 */
      /* 平移可以结合transition 做出浮起来的效果，还不影响其他人 */
      .box5 {
        width: 220px;
        height: 220px;
        background-color: salmon;
        transition: all 0.5s;/* 过渡效果 */
      }
      .box5:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <!-- <div class="box2"></div> -->
    <div class="box3"></div>
    <div class="box4">我要居中</div>
    <div class="box5">我要浮起来</div>
  </body>
</html>

燕穗子博客

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中变形transform属性—改变元素的形状或位置

变形是通过css来改变元素的形状或位置,可以做元素悬浮效果，以及元素居中设置，代码演示中有两种元素垂直居中的写法 —变形不会影响到页面的布局(只折腾自己) —transform: ;用来设置元素的变形效果 ,尽量变形写在一个transform里，不然下面再写一个，就会覆盖上面可选值：translateX()沿着x轴方向平移translateY()沿着y轴方向平移...
复制链接

扫一扫