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;
- 该属性 需要添加到
