移动web学习
移动web学习
- 1. 平面转换
-
- 位移
- 旋转
-
- 修改寻转中心点
- 多重转换
- 缩放
- 2. 渐变背景
- 3.空间转换
-
- 平移
- 空间旋转
- 立体图形
- 空间缩放
1. 平面转换
使用transform属性实现元素的位移、旋转、缩放等效果
位移
注意：一般要加过渡属性transition: all 0.5s;这样就会显示移动的效果。谁变化就加谁身上
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 {
/* transform: translate(100px, 50px); */
/* 百分比: 盒子自身尺寸的百分比 */
/* transform: translate(100%, 50%); */
/* transform: translate(-100%, 50%); */
/* 只给出一个值表示x轴移动距离 */
/* transform: translate(100px); */
transform: translateY(100px);
}
style>
head>
<body>
<div class="father">
<div class="son">div>
div>
body>
html>
旋转
img {
width: 250px;
transition: all 2s; /*必须加*/
}
img:hover {
/* 顺 */
transform: rotate(360deg);
/* 逆 */
/* transform: rotate(-360deg); */
}
修改寻转中心点
img {
width: 250px;
border: 1px solid #000;
transition: all 2s;
transform-origin: left bottom;
}
img:hover {
transform: rotate(360deg);
}
多重转换
使用transform复合属性实现多形态转换
.box {
width: 800px;
height: 200px;
border: 1px solid #000;
}
img {
width: 200px;
transition: all 8s;
}
.box:hover img {
/* 边走边转 */
/* transform: translate(600px) rotate(360deg); */
/* 旋转可以改变坐标轴向 */
transform: rotate(360deg) translate(600px);
/* 层叠性 */
/* transform: translate(600px);
transform: rotate(360deg); */
}
注意：不能写成transform: rotate(360deg) translate(600px);，因为旋转可以改变坐标轴向，影响平移，所以复合属性要先写平移再写旋转。
缩放
.box {
width: 300px;
height: 210px;
margin: 100px auto;
background-color: pink;
overflow: hidden;
}
.box img {
width: 100%;
transition: all 0.5s;
}
.box:hover img {
/* 放大 */
transform: scale(1.2);
}
注意：缩放也可以加复合属性，比如transform: translate(-50%, -50%) scale(5);。
2. 渐变背景
渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景
.box {
width: 300px;
height: 200px;
/* background-image: linear-gradient(
可多种颜色渐变
pink,
green,
hotpink
); */
background-image: linear-gradient(
transparent, /*透明颜色*/
rgba(0,0,0, .6)
);
}
3.空间转换
平移
注意：z轴变化在平面上看不到，需要使用属性perspective实现透视效果，近大远小、近实远虚。
其中的值就是透视距离也称为视距，就是人的眼睛到屏幕的距离。如果取值很小则变化很大，如果取值很大则没什么变化，效果不是很好。
body {
/* 给父亲加 */
perspective: 1000px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 0.5s;
}
.box:hover {
transform: translateZ(200px);
/* transform: translateZ(-200px); */
}
空间旋转
transform: rotateZ(值); /*和平面的rotate一样*/
transform: rotateX(值);
transform: rotateY(值);
通过左手法制判断旋转方向
拓展：rotate3d(x, y, z, 角度度数) 用来设置自定义旋转轴的位置及旋转的角度，其中x，y，z 取值为0-1之间的数字。
立体图形
可以使用transform-style: preserve-3d呈现立体图形，使子元素处于真正的3d空间。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立体呈现title>
<style>
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 2s;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front {
background-color: orange;
/* 向我走近200px */
transform: translateZ(200px);
}
.back {
background-color: green;
}
/* cube hover 为了看空间感效果 */
.cube:hover {
transform: rotateY(90deg);
}
style>
head>
<body>
<div class="cube">
<div class="front">前面div>
<div class="back">后面div>
div>
body>
html>
空间缩放
某个方向
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
3个方向缩放
transform: scale3d(x, y, z)