transfrom属性案例

最新推荐文章于 2025-04-07 15:52:16 发布

Σ'αγαπώ.

最新推荐文章于 2025-04-07 15:52:16 发布

阅读量1.2k

点赞数 32

分类专栏： css 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/CYX_COMnn/article/details/144274569

版权

css 专栏收录该内容

4 篇文章

订阅专栏

一、前言

上一篇文章我们一起学习了transform熟悉,这篇文章就让我们来写一些transform属性的相关案例,让我们能更加熟练地使用transform
如果有小伙伴不了解transform属性的可以阅读上一篇文章(https://blog.csdn.net/CYX_COMnn/article/details/144249036?spm=1001.2014.3001.5502)

二、transform:translate;案例

从上一篇文章中了解到translatr是用来位移,移动元素位置的,那么接下来我们通过过渡属性来再次了解一下translate
在这里插入图片描述
查看上面效果图可以看到,当鼠标悬浮时,盒子轻微向上移动,盒子底部出现阴影,那么接下来就让我们一起实现这个案例

实现步骤

/* 基本样式布局*/
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  /* 去除默认样式 */
    body,p,img {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #ccc;
    }
  .box{
      width: 234px;
      height: 300px;
      background-color: #fff;
      margin: 100px auto;/*让盒子距离顶部100px距离,水平居中显示*/
      padding: 20px 0;/*盒子内容距离顶部和底部20px内边距*/
      box-sizing: border-box;/*标准盒模型转为怪异盒模型*/
      display: flex;/*开启弹性盒子布局*/
      flex-direction: column;/*改变弹性盒子布局方向为垂直方向*/
      align-items: center;/*盒子内容水平居中*/
    }
    /* 设置图片大小 */
    .box>img {
      width: 160px;
      height: 160px;
    }
    /* 设置字体样式*/
    .box>p:nth-child(2) {
      font-size: 14px;
      color: #333;
      margin:  10 0px;
    } 
    .box>p:nth-child(3) {
      font-size: 12px;
      color: #b0b0b0;
      margin: 10px 0;
    } 
    .box>p:nth-child(4) {
      font-size: 14px;
      color: #ff6700;
      margin: 14px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./202411261127_8d9eefc4ea604b3c2c20ef4df1312591.webp" alt="">
    <p>REDMI K80 Pro</p>
    <p>骁龙8至尊版|2K新国屏|全焦段影像</p>
    <p>3699元起</p>
  </div>
</body>
</html>

效果图
在这里插入图片描述
为了方便观察,给饰扣添加灰色背景(代码中注释解释这一行代码作用)

 .box{
      width: 234px;
      height: 300px;
      background-color: #fff;
      margin: 100px auto;/*让盒子距离顶部100px距离,水平居中显示*/
      padding: 20px 0;/*盒子内容距离顶部和底部20px内边距*/
      box-sizing: border-box;/*标准盒模型转为怪异盒模型*/
      display: flex;/*开启弹性盒子布局*/
      flex-direction: column;/*改变弹性盒子布局方向为垂直方向*/
      align-items: center;/*盒子内容水平居中*/
      transition: all 1s;/* 添加过渡属性*/
    }

给类名为box的盒子添加过渡属性,执行时间为1秒.让盒子想先位移时又一个动画效果

   .box:hover {
      transform:translateY(-10px);
      box-shadow: 0 10px 10px #000;
    }

给类名为box的盒子添加hover伪类,当鼠标悬浮在box盒子时,执行动画,显示阴影,因为是向上移动,所以使用的事translateY,设置负值
在这里插入图片描述

到这里,关于这个案例就已经完成了,如果感兴趣的小伙伴可以尝试一下,原样式在小米商城官网.

三、transform:scale;案例

我们在逛网页上的购物网站是,会发现,当你鼠标悬浮在商品照片时,商品会有一个放大的效果,这个这个效果就可以使用transform:scale ,接下来让我们一起实现鼠标悬浮,图片放大的效果
在这里插入图片描述
观察上面的效果图,可以看到,当鼠标悬浮在图片上时,图片自动放大,鼠标离开时,照片缩回原来大小
(素材取自华为官网)

实现步骤

/* 基本样式布局*/
  body,p,img {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #ccc;

    }
    .box{
      width: 423px;
      height: 442px;
      background-color: #fff;
      margin: 100px auto;/*让盒子距离顶部100px距离,水平居中显示*/
      padding: 40px;/* 盒子内边距40px*/
      box-sizing: border-box;/* 尼奥准盒模型转化为怪异盒模型*/
      text-align: left;/* 文本居左对齐*/
    }
    /* 包裹图片的盒子*/
    .imgs {
      width: 240px;
      height:240px;
      margin: 0 auto;
    } 
    /* 照片大小*/
    .imgs>img {
      width: 240px;
      height: 240px;
      transition: all 1s;/* 过渡效果*/
    }
    /*文本样式*/
    .box>p:nth-child(2) {
      font-size: 14px;
      color: #ce0e2d;
      margin:  10px 0;
    } 
    .box>p:nth-child(3) {
      font-size: 14px;
      /* color: #ce0e2d; */
      margin:  10px 0px;
    } 
    .box>p:nth-child(4) {
      font-size: 12px;
      color: #b0b0b0;
      margin: 10px 0;
    } 
    .box>p:nth-child(5) {
      font-size: 14px;
      color: #ff6700;
      margin: 14px 0;
    }
<div class="box">
   <div class="imgs">
    <img src="./shelf-huawei-mate70-pro-plus.png" alt="">
   </div>
    <p>最新</p>
    <p>HUAWEI Mate 70 Pro+</p>
    <p>￥8499 起</p>
    <p>了解更多 ><span>购买 ></span></p>
  </div>

在这里插入图片描述
为了方便观察,给饰扣添加灰色背景(代码中注释解释这一行代码作用)

 .imgs:hover img {
      transform: scale(1.3);
    }

接下来我们头或hover伪类,当属表悬浮时图片放大, .imgs:hover img(当鼠标滑入imgs盒子时,盒子内的图片放大)
在这里插入图片描述

.imgs {
      width: 240px;
      height:240px;
      margin: 0 auto;
      overflow: hidden;
    }

在这里插入图片描述
因为图片放大,放大后的图片的宽高会增加,放大的图片会覆盖其他盒子,影响我们的布局,所以我们要给imgs盒子添加overflow:hidden(元素溢出隐藏),当图片放大时,放大的图片超出imgs盒子宽高部分会被隐藏
到这里关于这个案例也是已经结束了,如果对这个案例感兴趣的小伙伴可以尝试一下

四、transform:totate;案例

对于旋转属性,暂时没有发现什么有趣的案例,在这里,小编编写一个旋转的小动画

实现步骤

 .box {
      width: 200px;
      height: 200px;
      background-color: #f90;
      margin: 100px auto;/*让盒子距离顶部100px距离,水平居中显示*/
      transition: all 1s;/* 添加过度属性*/
    }
<div class="box">
    最编程!!
  </div>

在这里插入图片描述
代码中注释解释这一行代码作用

.box:hover {
      transform: rotate(360deg);
    }

我们给类名为box的盒子添加hover伪类,当鼠标滑入时,盒子顺时针旋转360deg,当鼠标离开橙色盒子时,盒子会逆时针旋转返回滑入之前的状态
在这里插入图片描述

到这里,关于rotate的案例已经编写结束,在以后得编程过程中,如果遇到有趣的旋转案例,也会发布新的文章分享给大家

五、transform:skew;案例

关于倾斜属性,小编在这里分享一个斜角布局的案例
在这里插入图片描述

实现步骤

  /* 通配符选择器,去除默认样式*/
   *{
    margin: 0;
    padding: 0;
   }
   ul,li {
    list-style-type: none;
   }
   .nav {
    width: 520px;
    margin: 100px auto;
    display: flex;
    justify-content: space-between;
    text-align: center;
   }
   .nav>li {
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: #abbff3;
   }

  <div class="box">
    <ul class="nav">
      <li><span>首页</span></li>
      <li><span>前端开发</span></li>
      <li><span>短视频运营</span></li>
      <li><span>Java大数据</span></li>
      <li><span>人工智能</span></li>
     </ul>
   </div>

布局基本结构,基本样式
在这里插入图片描述

.nav>li {
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: #abbff3;
    transform: skew(-30deg);
   }

给li添加skew()
在这里插入图片描述
给li添加skew()后发现文字也发生了倾斜,所以我们下一步要纠正文字的倾斜

 .nav>li>span {
    display: inline-block;
    transform: skew(30deg);
   }

在这里插入图片描述
给包裹文字的span标签设置做倾斜skew(30deg),扶正文字

 .nav {
    width: 520px;
    margin: 100px auto;
    display: flex;
    justify-content: space-between;
    text-align: center;
    overflow: hidden;
   }

在这里插入图片描述
扶正文本后,我们就要去掉倾斜后,ul两边的斜角了
我们给li盒子添加transform,translate属性,让他沿X轴负值移动10px的距离

.nav>li {
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: #abbff3;
    transform: skew(-30deg) translateX(-10px);
   }

在这里插入图片描述
这样左边的角就消失不见了,但这时右边的角就出现了,
这是,我们设置一下包裹ul标签的父盒子的宽度就可以了,让父盒子的宽度,小于ul盒子的宽度

.box {
    width: 500px;
    overflow: hidden;
    margin: 100px auto;
   }

在这里插入图片描述
到这里,两边的角就已经去掉了
接下来我们给文字添加滑入样式就可以了

 .nav>li:hover {
    color:#fff;
    background: orange;
   }

我们给li标签添加hover伪类
让鼠标滑入后,文字颜色变白色,背景色变橙色
|
到这里,我们的斜角布局也是已经完成了