transform变形
1.什么是变形
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DnaEKgwq-1637198238631)(C:\Users\EDZ\Desktop\HTML&CSS基础\day15\课件\image\14-1.png)]
2.2D变换transform
2d转换是改变标签在2维平面上的位置和形状的一种技术
2.1 2维坐标系
2维坐标系其实就是指布局的时候的坐标系
2.2 2D移动 translate
2d移动是2d转换里面的一种功能,可以改变元素在页面中的位置,类似 定位
使用2d移动的步骤:
1.给元素添加转换属性transform
2,属性值为translate(x,y)
div{
transform: translate(50px,50px);
}
小结
- translate中的百分比单位是相对于自身元素的
translate:(50%,50%);
- translate类似定位,不会影响到其他元素的位置
- 对行内标签没有效果
2.3 2D旋转rotate
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
使用步骤:
-
给元素添加转换属性
transform
-
属性值为
rotate(角度)
如transform:rotate(30deg)
顺时针方向旋转30度div{ transform: rotate(0deg); }
2d旋转有以下特点
- 角度为正时 顺时针 负时 为逆时针
- 默认旋转的中心点是元素的中心点
旋转中心transform-origin 了解
该属性可以修改元素旋转的时候的中心点
- transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
- transform-origin:top left; 左上角 和 transform-origin:0 0;相同
- transform-origin:50px 50px; 距离左上角 50px 50px 的位置
- transform-origin:0; 只写一个值的时候 第二个值默认为 50%;
2.4 缩放 scale
只要给元素添加上了这个属性就能控制它放大还是缩小
步骤:
-
只要给元素添加上了这个属性就能控制它放大还是缩小
-
转换的属性值为
scale(宽的倍数,高的倍数)
如 宽变为两倍,高变为3倍transform:scale(2,3)
div{ transform:scale(2,3); }
小结
- transform:scale(1,1) 放大一倍 相对于没有放大
- transform:scale(2,2) 宽和高都放大了2倍
- transform:scale(2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
- transform:scale(0.5,0.5) 缩小
- transform:scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解
3.3D转换
3d转换是改变标签在3坐标系上的位置和形状的一种技术
3维坐标系
3维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的
- x轴 水平向右
- y轴 垂直向下
- z轴 垂直屏幕 由屏幕里面指向屏幕的外面
3.1 移动 translate3D
3d移动在2d移动的基础上多加了一个可以移动的方向,就是z轴方向
语法:
- transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
- translform:translateX(100px) 仅仅是移动在x轴上移动
- translform:translateY(100px) 仅仅是移动在Y轴上移动
- translform:translateZ(100px) 仅仅是移动在Z轴上移动
注意:
因为z轴是垂直屏幕,由里指向外面,所以 默认是看不到元素在z轴的方向上移动,想要看到,可以使用下面的 视距 属性设置
视距 perspective 了解
perspective 就是用来设置 人 和 物体 的距离
如 我们想要看到 物体 在z轴上的移动 的 远大近小 效果时
- 设置物体的
translateZ
一般大于 0 如transform:translateZ(100px)
- 设置 人和物体的距离 - 视距 这个值规定要设置给物体的父元素
perspertive:1000px
- 动态改变物体的
translateZ
即可观察效果
/* 父元素 */
body {
/* 视距 */
perspective: 1000px;
}
/* 目标 */
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* z轴的移动 */
transform: translateZ(0px);
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3VkuPP4e-1637198238639)(C:\Users\EDZ\Desktop\HTML&CSS基础\day15\课件\image\5.gif)]
小结
- translateZ的值和perspective都要大于0 否则容易出现兼容性问题
3.4 3d旋转 rotate3d
3d旋转指可以让元素在3维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转 对于元素旋转的方向的判断 我们需要先学习一个左手准则
左手准则
比如要判断某元素沿着x轴是怎么旋转的
- 左手的手拇指指向 x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了
例子:
/* 沿着x轴正方向旋转90度 deg为单位 */
transform: rotateX(90deg);
可以通过自己的代码测试 让物体沿着y轴 z轴旋转,加深了解。
语法
transform:rotateX(45deg);
沿着x轴正方向旋转 45度transform:rotateY(45deg)
沿着y轴正方向旋转 45degtransform:rotateZ(45deg)
沿着Z轴正方向旋转 45degtransform:rotate3d(x,y,z,deg)
沿着自定义轴旋转 deg为角度 了解即可
视距原点 perspective-origin 了解
视距可以设置 人 和 物体 之间的距离 也就是z轴方向的距离
而 视距原点 可以设置 人 站在x轴和y轴的位置。
- 视距原点和视距一样,也是设置给要观察元素的父元素上
- perspective-origin:center center; 默认值是元素的中心点
- perspective-origin:10px; 指定了一个参数的时候,第二个参数默认为center 也就是50%;
- perspective-origin:10% %; 百分比都是相对于自身的宽度和高度
转换样式 transform-style 了解
结合3d立方体案例理解,控制子元素是否开启3维立体环境
transform-style: flat;
平面模式 - 不开启3维立体环境transform-style: preserve-3d;
3维立体环境
3D转换总结
- 百分比单位都是相对于自身
身的宽度和高度
转换样式 transform-style 了解
结合3d立方体案例理解,控制子元素是否开启3维立体环境
transform-style: flat;
平面模式 - 不开启3维立体环境transform-style: preserve-3d;
3维立体环境
3D转换总结
- 百分比单位都是相对于自身
- 视距、视距原点、转换样式 这三个属性都是给父元素添加的