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

效果图:

相关推荐
なし.6 小时前
【Web前端开发精品课 HTML CSS JavaScript基础教程】第二十四章课后题答案
前端·javascript·css·html
林的快手7 小时前
伪类选择器
android·前端·css·chrome·ajax·html·json
运维阿江8 小时前
【小白学HTML5】一文讲清常用单位(px、em、rem、%、vw、vh)
前端·html·html5
网安Ruler9 小时前
泷羽Sec-黑客基础之html(超文本标记语言)
前端·学习·网络安全·html
前端Hardy12 小时前
HTML&CSS :生日蛋糕
css·html
前端Hardy12 小时前
HTML&CSS :惊爆!会跳舞的机器人
css·html
我命由我1234515 小时前
微信小程序项目 video 组件失效问题,无法播放本地视频
前端·javascript·vue.js·前端框架·编辑器·html·html5
Ama_tor16 小时前
网页制作03-html,css,javascript初认识のhtml的图像设置
前端·css·html
~废弃回忆 �༄17 小时前
HTML/CSS中后代选择器
前端·css·html·html/css中后代选择器
燃灯工作室17 小时前
Python利用markdown库实现Markdown到HTML的高效转换(附安全处理与样式扩展)
开发语言·python·html