前端 CSS 属性transform 平面转换 详解
CSDN 2024-10-15 09:33:01 阅读 94
可以通过设置css属性改变标签的移动位置，旋转，缩放比例，倾斜度数。
transform 是一个符合属性，一个标签的属性不可以出现两个transform。可以发他们的值写在一些。
移动的方向是：
水平左正，右负。
垂直方向，上负，下正。
首先显示transform 的属性都有那些
translateX(x)：平移元素沿 x 轴translateY(y)：平移元素沿 y 轴translate(x, y)：平移元素沿 x 和 y 轴scaleX(x)：缩放元素沿 x 轴scaleY(y)：缩放元素沿 y 轴scale(x, y)：缩放元素沿 x 和 y 轴rotate(angle)：旋转元素一个角度rotateX(angle)：沿 x 轴旋转元素rotateY(angle)：沿 y 轴旋转元素rotateZ(angle)：沿 z 轴旋转元素skewX(angle)：倾斜元素沿 x 轴skewY(angle)：倾斜元素沿 y 轴skew(angle);默认原点倾斜
1：translate 移动位置
用到的是
transform: translate(200px,100px); 表示向左移动200px,向下移动100px.
transform: translate(200px);也可以是一个值，表示向左移动200px.
transform: translate(100%); translate里的值也可以是百分比。
移动的距离是参考自身，如果自身宽度是200px，那么100%就是200px,同时高度也是同样的道理。
translateX() 表示的就是向水平方向可以作用移动。
translateY() 表示的是垂直方向移动。
<code><head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>平移效果</title>
<style>
.father{
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son{
width: 200px;
height: 100px;
background-color: pink;
transition: all 0.5s;
}
/* 鼠标移入到父盒子,.son改变位置 */
.father:hover .son {
/* 做移动200px,向下移动100px */
transform: translate(200px,100px);
/* 百分比:参照盒子自身尺寸计算结果 */
/* 这个向当于向左100px,向下100px */
transform: translate(50%,100%);
transform: translate(-50%,100%);
/* 只写一个数表示水平方向 */
transform: translate(100px);
transform: translatey(100px);
transform: translateX(100px);
}
</style>
</head>
<body>
<div class="father">code>
<div class="son"></div>code>
</div>
</body>
2：scale 缩放比例
transform: scale(2); 作用是把原来的宽高，缩放到之前的2倍。
scaleX(x)：缩放元素沿 x 轴scaleY(y)：缩放元素沿 y 轴scale(x, y)：缩放元素沿 x 和 y 轴
特别注意：
transform-origin: right bottom; 这个属性transform-origin：可以改变缩放的中心位置。
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>缩放效果</title>
<style>
.box{
width: 300px;
height: 200px;
margin: 100px auto;
background-color: pink;
}
.box img{
width: 100%;
transition: all 1s;
}
.box:hover img
{
/* 修改宽度尺寸,从坐上角开始缩放 */
/* width: 500px; */
/* height: 300px; */
/* 大于1 ,表示放大 */
/* transform: scale(2); */
/* 小于1,表示放小 */
/* transform: scale(0.5); */
/* 等于1,表示不变 */
transform: scale(1);
}
</style>
</head>
<body>
<div class="box">code>
<img src="./images/product.jpeg" alt="">code>
</div>
</body>
3：rotate(angle)；旋转时带上单位。
rotate(angle)：旋转元素一个角度rotateX(angle)：沿 x 轴旋转元素rotateY(angle)：沿 y 轴旋转元素rotateZ(angle)：沿 z 轴旋转元素
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>旋转效果</title>
<style>
img
{
width: 200px;
transition: all 2s;
}
/* 鼠标悬停到图片上,添加旋转效果 */
img:hover
{
/* 正数:图片是顺势针旋转,负数:图片是逆势针旋转 */
transform:rotate(360deg);
transform:rotate(-360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">code>
</body>
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>旋转原点</title>
<style>
img{
width: 200px;
height: 200px;
border: 1px solid sandybrown;
transition: all 1s;
/* 改变旋转得位置. */
transform-origin: right bottom;
}
img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">code>
</body>
</html>
特别：
也可以先移动在旋转
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>多种转换效果</title>
<style>
.box{
width: 800px;
height: 200px;
border: 1px solid #000;
}
img{
width: 200px;
transition: all 5s;
}
/*鼠标移动到盒子里,图片边走边转*/
.box:hover img{
/* 先平移,在旋转 */
transform: translate(600px) rotate(360deg);
/* 旋转会改变坐标轴向 */
/* 多重转换:以第一种旋转形态得坐标轴为准 */
/* transform: rotate(360de) translate(600px); */
/* 层叠性 */
/* transform: translate(600px); */
/* transform: rotate(360deg); */
}
</style>
</head>
<body>
<div class="box">code>
<img src="./images/tyre.png" alt="">code>
</div>
</body>
4：skew(angle);默认原点倾斜
skewX(angle)：倾斜元素沿 x 轴skewY(angle)：倾斜元素沿 y 轴skew(angle);默认原点倾斜
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>倾斜效果</title>
<style>
div{
margin: 0 auto;
width: 100px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover{
transform: skew(30deg);
}
</style>
</head>
这个transform CSS属性，是一个混合属性:
transform: translate(800px) rotate(360deg) scale(2) skew(180deg);
在一个标签中，要回合写在一起，同时顺序不同效果也会不同。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。