移动web变形,旋转,缩放
- 变形 transform（2D）
- 位移 translate
- 盒子水平和垂直
- 旋转 rotate
- 设置中心点 transform-origin
- 多形态变形小技巧
- 缩放 scale
- 渐变
变形 transform（2D）
变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）
位移 translate
translate可以让盒子沿着x轴或者y轴来移动。
语法：
/* 变形 transform-- 位移 translate*/
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);
问题：
- 它和margin的区别。
- margin移动盒子会影响其余的盒子。把其他人挤走。
- 位移translate移动盒子不会影响其他的盒子。不脱标。
注意：
移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度
transform: translateX(100%);
盒子水平和垂直
可以让一个子盒子在父盒子里面水平和垂直居中。
.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: skyblue;
transform: translate(-50%, -50%);
}
/* 了解即可 */
/* .inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
background-color: skyblue;
} */
/*分析:*/
.inner {
width: 200px;
height: 200px;
background-color: purple;
/* 左侧全部充满 */
margin-left: auto;
/* 右侧全部充满 */
margin-right: auto;
/* margin: 0 auto; */
}
旋转 rotate
旋转可以让盒子旋转角度。
语法：
transform: rotate(45deg); 一定写单位
如果是正度数，则是顺时针旋转
如果是负度数，则是逆时针旋转
<style>
img {
width: 200px;
transition: .5s;
}
img:hover {
/* 旋转语法 */
transform: rotate(-360deg);
}
.arr {
width: 40px;
height: 40px;
border-right: 2px solid pink;
border-bottom: 2px solid pink;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<img src="./images/p4-tx3.png" alt="">
<div class="arr"></div>
</body>
设置中心点 transform-origin
设置旋转的中心点位置
transform-origin: right bottom;
<style>
img {
width: 200px;
transition: .5s;
/* 旋转中心点 */
/* transform-origin: right bottom; */
}
img:hover {
/* 旋转语法 */
transform: rotate(-360deg);
}
</style>
</head>
<body>
<img src="./images/p4-tx3.png" alt="">
</body>
多形态变形小技巧
-
如果需要移动，也需要旋转，则一定先写移动，后写旋转,
css属性书写顺序影响代码执行。transform: translate(-50%, -50%) rotate(360deg); -
注意，多个值之前用 空格隔开。
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 1.1 设置大盒子基本样式 */
.box {
width: 800px;
height: 200px;
border: 2px solid pink;
margin: 100px auto;
}
/* 1.2 设置过渡效果 */
.box img {
transition: all 10s;
}
/* 1.3 设置多重转换效果 */
.box:hover img {
/* 正确写法语法 各个属性值之间 使用空格隔开 */
/* transform: translate() rotate(); */
transform: translateX(600px) rotate(360deg);
/* 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。 */
/* 旋转会改变网页元素的坐标轴方向 */
/* transform: rotate(360deg) translateX(600px); */
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tyre.png" alt="" width="200">
</div>
</body>
缩放 scale
语法：
transform: scale(1.2)；
它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。
<style>
/* img {
width: 200px;
transition: all .5s;
}
img:hover {
width: 400px;
} */
img {
display: block;
margin: 100px auto;
transition: all .6s;
}
img:hover {
/* 以中心点往四周缩放 */
transform: scale(1.5);
}
</style>
</head>
<body>
<img src="./images/hero.jpeg" alt="">
</body>
渐变
线性渐变
基本语法：
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))
<style>
.box {
width: 300px;
height: 300px;
/* background-color: pink; */
/* background-image: linear-gradient(red, green); */
/* 默认的方向是 to bottom */
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
/* background-image: linear-gradient(方向,颜色1, 颜色2...颜色n); */
/* background-image: linear-gradient(to right, red, green, blue); */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
