CSS3转换 transform_transform: translate(0, -105px);

目录

一、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(<angle>);表示只在X轴(水平方向)倾斜。

  • skewY(<angle>);表示只在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)：正值向前，负值向后 透视原理： 近大远小 。

<div class="box1">
    <div class="son1">1111</div>
</div>
​
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            border: 2px solid #000;
            margin: 0 auto;
            perspective: 200px;
        }
        .son1 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px 0 0 100px;
        }
        .box1:hover .son1 {
            transition: 2s;
 
 /*  向下翻转，上边朝里 ，负值就是向下翻转，上边朝外  */
            /* transform: rotateX(80deg); */  
 
  /*左边向外，向右旋转，负值就是左边向里，向右旋转*/
            /* transform: rotateY(80deg); */ 
 
            transform: translateZ(100px);
        }
    </style>