CSS3转换 transform

目录

一、CSS3转换 transform

2D转换

translate() 平移

rotate() 旋转

scale() 放大缩小

skew() 倾斜

3D转换

1、rotateX(80deg)：正值向上翻转

2、rotateY(180deg)：正值向右翻转

3、translateZ(100px)：正值向前，负值向后 透视原理： 近大远小 。

---

一、CSS3转换 transform

CSS3 转换是使元素改变形状、尺寸和位置的一种效果。

转换可以对元素进行

移动transform: translateX(200px)、

缩放transform: scaleY(0.5)、

旋转transform: rotate(-90deg)、

拉长或拉伸transform: skewX(-10deg)。

1. transfrom不会影响其他元素的位置

2. transfrom对内联元素（inline）没有效果

2D转换

2D转换表现在平面上，主要方法有：

• translate() 平移

• 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

div {
    transform: translateX(50px);
    transform: translateY(100px);
    
    /* transform: translateZ(50px); 3d */
  
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */   
}

translate中的百分比单位是相对于自身元素的transform: translate(50%,50%);

• rotate() 旋转

• 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。 需要带单位deg（角度）

div {
    /* transform: rotateX(30deg); 沿着X轴 从右往左看 顺时针旋转一定角度 3d */
    /* transform: rotateY(30deg); 沿着Y轴 从下往上看 顺时针旋转一定角度 3d */
    
    /* 沿着Z轴 顺时针旋转 2d 以方框中心为原点，顺时针旋转 */
    transform: rotate(30deg); 与 transform: rotateZ(30deg) 一样

    -ms-transform: rotate(30deg);        /* IE 9 */

    -webkit-transform: rotate(30deg);      /* Safari and Chrome */
}

• scale() 放大缩小

• 该元素放大或缩小的大小，取决于宽度（X轴）和高度（Y轴）的参数 ，正数表示放大，小数表示缩小。以中心点进行缩放   >0   0-1就是缩小，>1就是放大

div {
    transform: scaleX(2)
    transform: scaleY(0.5);
    
    /* transform: scaleZ(0.5); 3d 
    
    transform: scale(2,3); /* 标准语法 */
    -ms-transform:scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
}

• skew() 倾斜

• 包含两个参数值，分别表示X轴Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

  • skewX();表示只在X轴(水平方向)倾斜。

  • skewY();表示只在Y轴(垂直方向)倾斜。

div {
    transform: skewX(10deg);   /*正值向左倾斜   负值向右倾斜*/
    transform: skewY(10deg);   /* 正值就是左向上倾斜    负值就是左向下倾斜*/
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

3D转换

想要看到立体效果就需要加上透视   透视perspective ：透视也称为视距，视距就是眼睛到屏幕的距离，距离视觉点较近的在电脑平面成像越大，越远成像越小，透视的单位是像素px，透视写在被观察元素的父元素上

1、rotateX(80deg)：正值向上翻转

2、rotateY(180deg)：正值向右翻转

3、translateZ(100px)：正值向前，负值向后 透视原理： 近大远小 。

    
1111

​