HTML(26)——平面转换-旋转-多重转换-缩放

旋转

属性:transform:rotate(旋转角度)

角度的单位是deg。

  • 取值为正,顺时针旋转
  • 取值为负,逆时针旋转

默认情况下,旋转的原点是盒子中心点

改变旋转的原点可以使用属性:**transform-origin:**水平原点位置 垂直原点位置

取值:

  • 方位名词(left,top,right,bottom,center)
  • 像素单位数值
  • 百分比

例如,要让图片绕右下角旋转

transfrom-origin: right bottom;

多重转换

多重转换技巧:先平移再转换

transfrom: translate() rotate();

复制代码
    .luntai {
      margin: 30px auto;
      width: 1100px;
      height: 200px;
      border: 3px solid #333;
    }

    img {
      transition: all 4s;
      width: 200px;
    }

    .luntai:hover img {
      transform: translate(700px) rotate(360deg);
    }

当鼠标移入盒子内,轮胎就会向右边滚动

缩放

写法:

transform:scale(缩放倍数);

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

复制代码
    .box {
      width: 200px;
      height: 165.58px;
      margin: 100px auto;
      background-color: #333;
    }

    img {
      width: 100%;
      transition: all 1s;
    }

    img:hover {
      transform: scale(2);
    }

该方法是以中心为原点进行缩放,如果直接在hover里面改变图片的大小,则是以左上角为原点

倾斜

属性:transform:skew(xxdeg);

效果图:

相关推荐
西西木科技丨Shopify开发机构42 分钟前
如何在 Shopify 中建立重定向
前端·html
Liudef061 小时前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_881244401 小时前
javaweb———html
前端·javascript·html
AA-代码批发V哥10 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由202010 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
Hilaku16 小时前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
ac.char18 小时前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin
每天开心18 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
撰卢18 小时前
如何提高网站加载速度速度
前端·javascript·css·html
sophister19 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html