旋转 缩放 平移 透视

旋转

  • 想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

  • 默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

    1
    2
    3
    4
    5
    6
    ul li:nth-child(2){
        transform: rotate(45deg);
        transform: rotateX(45deg);
        transform: rotateY(45deg);
        transform: rotateZ(45deg);
    }

  • 其中deg是单位, 代表多少度

  • 旋转之时，XYZ轴都跟着旋转

平移

1
2
3
ul li:nth-child(3){
    transform: translate(100px, 0px);
}
  • 第一个参数:水平方向

  • 第二个参数:垂直方向

    1
    2
    3
    4
    5
    6
    7
    img{
        transition: transform 1s;
        transform-origin: center bottom;
    }
    div:hover img{
        transform: rotateX(80deg);
    }

  • transform-origin: center bottom;的位置

缩放

1
2
3
4
ul li:nth-child(4){
    transform: scale(0.5, 0.5);
    transform: scale(0.5);
}
  • 第一个参数:水平方向
  • 第二个参数:垂直方向

注意点

  • 如果取值是1, 代表不变
  • 如果取值大于1, 代表需要放大
  • 如果取值小于1, 代表需要缩小
  • 如果水平和垂直缩放都一样, 那么可以简写为一个参数

综合

1
2
3
ul li:nth-child(5){
    transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
}

注意点

  • 如果需要进行多个转换, 那么用空格隔开
  • 2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的

形变中心点

1
2
3
4
5
6
7
ul li:nth-child(5){
    transform-origin: 200px 0px;
    transform-origin: 50% 50%;
    transform-origin: 0% 0%;
    transform-origin: center center;
    transform-origin: left top;
}
  • 第一个参数:水平方向
  • 第二个参数:垂直方向

注意点

  • 取值有三种形式
  • 具体像素
  • 百分比
  • 特殊关键字

透视

1.什么是透视

  • 近大远小
    2.注意点
  • 一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
1
2
3
ul li{
    perspective: 500px;
}

盒子阴影和文字阴影

1.如何给盒子添加阴影

  • box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

2.注意点

  • 盒子的阴影分为内外阴影, 默认情况下就是外阴影
  • 快速添加阴影只需要编写三个参数即可

  • box-shadow: 水平偏移 垂直偏移 模糊度

    1
    2
    3
    4
    .box1{
        box-shadow: 10px 10px 10px 10px skyblue;
        box-shadow: 10px 10px 10px 10px skyblue inset;
    }

  • 默认情况下阴影的颜色和盒子内容的颜色一致

3.如何给文字添加阴影

  • text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;
    1
    2
    3
    .box1{
        text-shadow: 10px 10px 10px black;
    }