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);

效果图:

相关推荐
hashiqimiya6 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
BillKu9 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
BUG创建者17 小时前
html获取16个随机颜色并不重复
css·html·css3
DevilSeagull19 小时前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
面向星辰19 小时前
html中css的四种定位方式
前端·css·html
IT利刃出鞘1 天前
HTML--最简的二级菜单页面
前端·html
yume_sibai1 天前
HTML HTML基础(4)
前端·html
面向星辰1 天前
html音视频和超链接标签,颜色标签
前端·html·音视频
信看1 天前
实用 html 小工具
前端·css·html
magnet1 天前
用img标签渲染的svg VS 直接使用svg标签,有什么区别?
前端·html