HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放

文章目录

  • transform系列
  • transform:translate()位移
    • 案例:位移-绝对定位居中
    • 案例:双开门
  • transform:rotate()旋转
    • transform-origin属性改变转换原点
    • transform复合属性实现多形态转换
  • transform:scale()缩放

transform系列

transform属性实现元素的位移、旋转、缩放等效果

HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第1张图片

transform:translate()位移

HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第2张图片

HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第3张图片

案例:位移-绝对定位居中

HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第4张图片
HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第5张图片

案例:双开门

HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第6张图片

HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第7张图片

transform:rotate()旋转

HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第8张图片
HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第9张图片

transform-origin属性改变转换原点

  • 默认圆点是盒子中心点
  • transform-origin: 原点水平位置 原点垂直位置;

取值
Ø 方位名词(left、top、right、bottom、center)
Ø 像素单位数值
Ø 百分比(参照盒子自身尺寸计算)
HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第10张图片

transform复合属性实现多形态转换

HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第11张图片
HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第12张图片
HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第13张图片

transform:scale()缩放

使用scale改变元素的尺寸
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

  • transform: scale(缩放倍数);
  • scale值大于1表示放大, scale值小于1表示缩小
    HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第14张图片
    缩放案例:
    HTML+CSS:平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放_第15张图片

你可能感兴趣的:(HTML5+CSS,平面,css,html)