transform_2d

在CSS3中,提供了变换这个属性transform,能够让我们更为灵活的操纵html元素,而不需要去考虑布局的问题

transform

主要就是三个方法

• 语法:

/* translate: 移动 第二个参数不传默认为0 */
/* 建议使用transform来实现元素的变换,不会影响其他的元素*/
transform:translate(x,y);

/* scale: 缩放 传递的是比例 比如 2倍,1.5倍,0.5倍等等 */
/* 可能会撑大body的 大小 出现滚动条*/
transform:scale(x,y);

/* rotate: 旋转 传递的是角度  360deg等于一圈*/
transform:rotate(angle);

/* skew: 斜方向扭曲 传递的是角度 360deg等于一圈 第二个参数不传默认为0*/
/* 如果两个轴 扭曲的角度一致 元素会消失*/
transform:skew(xAngle,yAngle);

/* 多个值 通过空格分隔*/
/* 移动 旋转 缩放 */
tranform:translate(10px,10px) rotate(180deg) scale(1.5,1.5);

transform-origin

这个属性指定的是移动时,以什么原点作为标准

• 语法:

/*x:50px y:中心 作为原点*/
transform-origin:50px;

/*x:50px y:50px 作为原点*/
transform-origin:50px 50px;

/*x:10% y:20% 作为原点*/
transform-origin:10% 20%;

/* 传入单词 
可选:top,left,right,center,bottom
*/
/* 左上 作为原点 */
transform-origin:right top;
/* 中心作为原点 */
transform-origin:center center;

transform 赋值先后问题

transform属性赋值方法

• css语法
  • 当我们要为元素添加多个值时,直接通过空格可以进行间隔
  • 会先执行 第一个 然后依次往后

div:nth-child(1){
    // 先选转,然后移动
    transform:roatate(45deg) translate(100px,0):
 
}
div:nth-child(2){
   // 先移动 然后先选转
     transform:translate(100px,0) roatate(45deg) :
}

transform_3d

对应的属性值依旧是transform,只是多了一个Z轴而已,需要一定的空间想象能力

坐标轴

• 其中Z轴垂直于屏幕往里
  ![图片1.png-133.8kB][2]

• 也可以通过左手坐标系来查找这几个轴
  ![图片2.png-111.1kB][3]

3d旋转

当明确了三个坐标轴以后,我们就能够对元素进行3d方向上的旋转了

• 左手定则

  • 大拇指指向旋转轴的正方向,其余四指弯曲的方向就是旋转的方向

• 语法

/* x方向旋转180°*/
transform:rotateX(180deg)
/* y方向旋转180°*/
transform:rotateY(180deg)
/* z方向旋转180°*/
transform:rotateZ(180deg)

视角

perspective(透视,视角)这个属性需要一定的空间想象能力,其实就是离我们近的一端看起来大一点

![image_1an3qfb301unh1tuf17271jr6fi611.png-7kB][4]
​

• 语法:

/*直接添加给transform:标签 距离 显示屏 1000px*/
transform:perspective(1000px)

/*直接使用perspective 属性赋值:标签 距离 显示屏 1000px*/
perspective:1000px

• 解释:
  • 这个属性的理解 需要配合transformZ()
  • 设置了perspective属性假定为1000px
  • 当我们使用transformZ()移动1000px时,会发现标签消失了,也就意味着,移出了 显示屏 空间想象

• 默认Y轴旋转45°
  ![image_1an3r1ad9fqh1s3511m21ge3rqs1r.png-7.5kB][5]

• 透视 Y轴旋转45°
  ![image_1an3r1rtdqs17epmj5an416r79.png-8.7kB][6]

• 使用注意:
  • 虽然可以直接添加给元素本身,但是建议添加到不进行变换的父容器中
  • 旋转的是 rotate-box 其内部子元素跟他的相对位置没有改变, 会出现 近大远小不改变的问题,这个时候只需要将 perspective提一级即可
  • 视角中心点
    • 当只有一个 子元素 并且 子元素 正好在中心的时候 刚好跟 中心点重合

视角方向(perspective-origin)

默认我们是直直的看着屏幕,通过该属性可以修改查看屏幕的角度,需要一定的空间想象能力,可以先不使用

• 默认视角
  ![image_1an3r8bpk1rg31rgo7m51bqvnvnm.png-15kB][7]

• 修改之后

![image_1an3rclse8dah178f2kln16jq13.png-21.4kB][8]

变换样式(transform-style)

在使用3d进行页面元素设置时,需要配合transform-style才能够实现完美的3d效果

• 默认值(旋转中)
  ![image_1an3rj09o1rcq1it1v5a1pm687s1g.png-316.9kB][9]

• 修改为3d
  ![image_1an3rk2il1n2o6is195a14bgcql1t.png-467.9kB][10]

• 使用注意:

  • 该属性 需要添加到 3d变换的父容器上
  • transform-style: preserve-3d;