transform变换
1. 变换属性 transform
变换分为2D变换和3D变换,描述的是一种变化之后的结果
允许我们对元素进行旋转、缩放、移动或倾斜。
1.1. 2D变换
transform:rotate() skew() scale() translate();
1.1.1 缩放 scale(x,y)
整体缩放缩放到原来的多少倍
取值:[正数 | 小数 | 0 | 负数]
取值范围:
- 大于0小于1 是缩小
- 大于1是放大
- 可以有两个值，水平方向 竖直方向
- 可以有负数，反向缩放
transform:scale(0.8);
/* 缩小到0.8倍 */
取值个数:
- 一个值 既代表X轴，也代表Y轴
- 两个值 第一个代表X轴，第二个代表Y轴，逗号隔开
例子
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
background-color: #ccc;
margin: 50px auto;
}
.box p {
width: 100px;
height: 100px;
background-color: red;
transition: 1s;
/*过渡的效果 */
}
.box:hover p {
transform: scale(-2);
/*transform: scale(.5,2);*/ /*两个值*/
/* 2D变换 缩放*/
}
</style>
</head>
<body>
<div class="box">
<p>我会变</p>
</div>
</body>
可单独拆分为scaleY()和scaleX()
transform: scaleX(.5)
1.1.2 位移 translate(x,y)
定义在 X轴Y轴的移动,向右向下为正。
取值:
- 一个值 默认代表X轴方向
- 两个值 第一个值代表X轴方向，第二个值代表Y轴方向
transform：translate(100px);
transform: translate(50px,50px);
可单独拆分为translateX()和translateY()
transform：translateX（100px）;
/* 代表X轴方向 */
transform：translateY（100px）;
/* 代表Y轴方向 */
例子
修改上例中hover之后p标签的样式
.box:hover p{
transform:translate(100px,150px);
}
居中方式的改进：translate(-50%,-50%)
/* 当前盒子宽高的百分比，相对于当前元素本身*/
.child{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%); /*保证元素的居中，省去之前的margin*/
width:100px;
height:100px;
}
1.1.3 旋转 rotate(angle)
旋转,正直为顺时针,负值为逆时针
角度单位:
- deg 角度 360deg
- rad 弧度 1.57rad
- turn 圈 1turn
transform:rotate(30deg);
/*沿着中心旋转30度,默认绕着Z轴旋转。X轴rotateX(30deg) Y轴rotateY(30deg) 箭头方向顺时针是正值 逆时针是负值*/
<!-- css -->
<style>
.box{
width:100px;
height:100px;
background-color: red;
transition:1s;
}
.box:hover{
transform:rotate(1turn);
/*transform: rotate(1.57rad); 弧度写法*/
/*transform: rotate(1turn); 圈写法*/
}
</style>
<!-- html -->
<div class="box">
hello
</div>
X轴 Y轴 Z轴综合写法
transform: rotateX(80deg) rotateY(60deg) rotateZ(60deg); /*不是真正的3D*/
1.1.4 倾斜 skew(x,y)
定义沿着 X 和 Y 轴的 2D 倾斜转换。（单位deg）
值:
- 一个值 表示水平方向的倾斜角度
- 两个值 第一个值代表X轴方向，第二个值代表Y轴方向（逗号隔开）
- 可支持负值
transform：skew（30deg）; /*x轴倾斜30deg*/
transform： skew（0，30px）;
transform： skew（30px，30px）;
控制台调节数值时：滚轮按住shift使用每次增10；按住ctrl每次增减100
可分解为skewX()和skewY()
-
skewX(angle)沿着 X 轴的2D倾斜转换。 -
skewY(angle)沿着 Y 轴的2D倾斜转换。
transform： skewX （30deg）;
/* 代表X轴方向 */
transform： skewY （30deg）;
/* 代表Y轴方向 */
1.1.5 变换基点 transform-origin(x,y,z)
默认基点为中心点[50%,50%]，效果等同于center center
可以通过设置坐标值或关键词改变基点
参数:
- X :定义基点被置于 X 轴的何处。
- Y :定义基点被置于Y 轴的何处。
- Z :定义基点被置于Z轴的何处(
3D环境才有)。
值:
-
关键词: 默认center
top/left/right/bottom
-
像素值
px可以为负值。 -
百分比值 % 可以为负值
参照background-position
.box p {
width: 100px;
height: 100px;
background-color: red;
transition: 1s;
/*过渡的效果 */
transform-origin: left top; /*将变换基点改为左上角 写在原来的元素上，和过渡效果写一起*/
}
.box:hover p {
transform: rotate(1rad);
}
注意
如果设置两个，第一个为X轴，第二个为Y轴（两值以空格隔开）
如果设置一个，该值为X轴，第二个默认Y轴50%（给定值时）
1.1.6 Transform多值影响
多值的使用
transform 属性可以一次设置多个变换值, 以空格隔开
transform:translate(100px) scale(0.5);
多值的影响
- transform:scale() translate()；与 transform: translate() scale(); 执行先后的区别，
- 如果先scale则后面的translate会受到 受scale影响
transform:translate(100px) scale(0.5);/* 推荐先位移，缩放scale写在后面 */
transform:scale(0.5) translate(100px);
1.2. 3D变换
1.2.1 设置3D环境 transform-style
设置给父元素,建立3D空间
定义： 指定子元素定位在三维空间内， 当该属性值为preserve-3d时，元素将会创建局部堆叠上下文。
属性值:
- flat（默认） 指定子元素位于此元素所在平面内
-
preserve-3d创建3D环境
1.2.2 设置景深 perspective
给父元素添加,视镜 查看 3D 元素的距离(none | length)
属性值：
一般使用 看起来最适应800px或者 1200px
1.2.3 perspective-origin 透视点X Y轴的位置
perspective-origin属性是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置(或者说基点)，在该位置观看者好像在观看该元素的子元素。
属性值：
- 定义视图在x轴上的位置。默认值：50%。可能的参数值形式:left、center、right、length和%。
- 定义视图在y轴上的位置。默认值：50%。可能的参数值形式:top、center、bottom、length和%。
<!--css -->
<style>
*{margin:0;padding:0;}
.box{
width:1000px;
height:500px;
background-color: #eee;
margin: 50px auto;
perspective:800px; /*视镜：观看的距离*/
perspective-origin:center top;
}
.box ul{
transform-style:preserve-3d;/*打造3D空间，舞台*/
border:1px solid green;
}
.box ul li{
list-style:none;
width:200px;
height:200px;
background-color: red;
transform:rotateX(30deg);
}
</style>
<div class="box">
<ul>
<li>hello</li>
</ul>
</div>
1.2.4 backface-visibility 背面是否可见
属性值
- visible（默认）： 指定元素背面可见
- hidden：指定元素背面不可见
1.2.5 3D旋转 rotate
绕某个轴旋转
-
rotateX()水平方向为X轴，表现为上下转 -
rotateY()竖直方向为Y轴，表现为左右转 -
rotateZ()垂直屏幕为Z轴，表现为顺逆时针 -
rotate3d(x,y,z,angle)x y z ，是表示你是否希望沿着该轴旋转，是为1，不是为0
angle：是一个角度值，主要用来指定元素在3D空间旋转的角度，【deg】
transform:rotate3d(1,1,0,30deg);
1.2.6 缩放转换scale
- scaleX(x) 通过设置 X 轴的值来定义缩放转换。
- scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
- scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。需和变换函数配合使用，才能看到效果,scaleZ要写在前面
- scale3d(x,y,z) x,y,z 均为【正数 | 小数 | 零 | 负数 】
1.2.7 位移
- translateX(x) 定义位移，只是用 X 轴的值。
- translateY(y) 定义位移，只是用 Y 轴的值。
- translateZ(z) 定义 3D 位移，只是用 Z 轴的值。正值往前，负值往后
- translate3d(x,y,z)
transform:translateZ(-2000px); 正值往前越来越近放大，负值往后越来越远缩小
Z轴上的其他变换
- 在Z轴方向上的缩放
scaleZ() - 在Z轴方向上的位移
translateZ()
网友评论