[TOC]
移动web第二天
平面转换
1.位移的基本使用
平面转换 位移：transform: translate(0px, 0px);快捷敲代码的技巧 trf : t
使用百分百单位，相对于自身的尺寸 ：transform: translate(100%, 100%);
控制元素只在某一个方向上的位移，方式两种：transform: translate(100px, 0px);
transform: translate X(100px); transform: translate Y(100px)
<title>01-位移基本使用.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 100px;
height: 100px;
background-color: aqua;
transform: translateY(100px);
}
</style>
</head>
<body>
<div></div>
</body>
2.绝对定位元素居中
<title>02-绝对定位元素居中.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 600px;
height: 600px;
background-color: pink;
margin: 100px auto;
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
注：margin和定位的百分比单位都是相对于父元素，只有位移 translate百分比是相对于自身
margin-top : 自身高度的一半
margin-left: 自身宽的一半
当盒子的宽度发生了改变之后，margin的值需要重新去计算
3.绝对定位元素-位移居中
使用translate快速实现绝对定位的元素居中效果
<title>03-绝对定位元素-位移居中</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 600px;
height: 600px;
background-color: pink;
margin: 100px auto;
position: relative;
}
.son {
width: 400px;
height: 400px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
之前居中： 设置margin值 移动 自身的宽度和高度 一半
现在居中： 位移 translate 百分比单位 相对于自身的宽度和高度
示例： transform: translate(-50%, -50%);
旋转
1.旋转效果
使用rotate实现元素旋转效果
旋转也是平面转换中的一种，注意加上单位 deg
示例：transform: rotate(150deg);
<title>04-旋转效果.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
margin: 50px auto;
/* 省略 all */
transition: 1s;
}
img:hover {
transform: rotate(720deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="" />
</body>
2.转换原点
使用transform-origin属性改变转换原点
默认圆点是盒子中心点，transform-origin: 原点水平位置 原点垂直位置；
取值：方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）
<title>05-转换原点</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
margin: 100px auto;
transition: 10s;
border: 1px solid #000;
/* 修改元素的旋转的中心点 */
/* transform-origin: 方位名词; */
/* transform-origin: 像素; */
/* transform-origin: 百分比单位; */
/* 左上角 */
/* transform-origin: top left; */
/* transform-origin: 0px 0px; */
/* 右下角 */
/* transform-origin: right bottom; */
/* transform-origin: 650px 650px; */
/* 相对于自身的尺寸 */
transform-origin: 100% 100%;
}
img:hover {
transform: rotate(720deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="" />
</body>
3.多重转换效果
使用transform复合属性实现多形态转换
<title>06-多重转换效果.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* div {
width: 400px;
height: 400px;
margin: 200px auto;
background-color: aqua;
transition: 1s;
} */
/* div:hover { */
/* 位移 */
/* transform: translateX(300px); */
/* 旋转 */
/* transform: rotate(360deg); */
.box {
width: 800px;
/* 高度 让内容撑开 */
margin: 200px auto;
border: 1px solid #000;
}
img {
width: 200px;
transition: 5s;
}
.box:hover img {
/* 位移+旋转 */
transform: translateX(600px) rotate(720deg);
}
</style>
</head>
<body>
<!-- <div></div> -->
<div class="box">
<img src="./images/tyre1.png" alt="" />
</div>
</body>
注：要实现多种转换效果的时候，不能写多行transform，会被层叠。
当位移和旋转共同出现的时候，先位移后旋转和先旋转后位移的效果不一样，物体在先旋转的时候，坐标系也跟着旋转，所以先位移再旋转。
示例：正确写法 transform: translate X(300px) rotate(360deg); transform: rotate(360deg) translate X(300px);
空间转换
1.空间位移
使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
语法：transform: translate3d(x, y, z);
transform: translate X(值);
transform: translate Y(值);
transform: translate Z(值);
<title>01-空间位移.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 200px auto;
/* 设置在x轴方向上移动 */
/* transform: translateX(-300px); */
/* 设置在y轴方向上移动 */
/* transform: translateY(-300px); */
/* 设置在z轴上移动 */
/* 记起来z轴方向 正方向 屏幕指向外面 */
/*
默认情况下 不可能让div 飘出屏幕外面
默认情况下 看不到z轴上的变化
*/
transform: translateZ(500px);
}
</style>
</head>
<body>
<div>空间位移</div>
</body>
2.透视效果
代码规范 :要给被观察的物体的父元素使用，主要是添加近大远小效果
设置视距：一般为1000px
<title>02-透视效果.html</title>
<style>
/*
视距
设置 人的眼睛到被观察物体之前的距离
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 视距 一般随意的设置1000 */
perspective: 1000px;
}
div {
width: 200px;
height: 200px;
background-color: aqua;
/* transform: translateZ(500px); */
/* 两行代码是等价的！！ */
transform: translateX(100px) translateY(100px) translateZ(100px);
transform: translate3d(100px, 100px, 100px);
}
</style>
</head>
<body>
<div>空间位移</div>
</body>
3.空间旋转
使用rotate实现元素空间旋转效果
语法：transform: rotate Z(值);
transform: rotate X(值);
transform: rotate Y(值);
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
x，y，z取值为0-1之间的数字
空间旋转X轴
<title>03-空间旋转-X轴.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #666;
text-align: center;
padding-top: 300px;
perspective: 1000px;
}
img {
transform: rotateX(0deg);
transition: 2s;
}
img:hover {
transform: rotateX(360deg);
}
</style>
</head>
<body>
<img src="./images/pk1.png" alt="" />
</body>
空间旋转Y轴
<title>04-空间旋转-Y轴</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #666;
text-align: center;
padding-top: 300px;
perspective: 1000px;
}
img {
transform: rotateY(0deg);
transition: 2s;
}
img:hover {
transform: rotateY(360deg);
}
</style>
</head>
<body>
<img src="./images/pk1.png" alt="" />
</body>
空间旋转Z轴
<title>05-空间旋转-Z轴.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 200px auto;
/* 沿着Z轴做旋转 */
transform: rotateZ(0deg);
}
</style>
</head>
<body>
<div>旋转</div>
</body>
立方体
使用transform-style: preserve-3d呈现立体图形
<title>06-立方体.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
perspective: 1000px;
}
.box {
opacity: 0.9;
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
/* 开启立体空间 */
transform-style: preserve-3d;
/* 任意轴 旋转 */
/* transform: translateZ(300px) rotate3d(1, 1, 1, 60deg); */
/* transform: translateZ(0px); */
transition: 2s;
}
.box:hover {
transform: rotateX(-90deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* opacity: 0.8; */
}
.front {
background-color: salmon;
/* z轴 正 移动 +100 */
transform: translateZ(100px);
}
.back {
/* z轴 负 移动 -100 */
transform: translateZ(-100px);
background-color: seagreen;
}
.left {
transform: translateX(-100px) rotateY(90deg);
background-color: lawngreen;
}
.right {
transform: translateX(100px) rotateY(90deg);
background-color: yellow;
}
.up {
background-color: aqua;
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(90deg);
background-color: purple;
}
</style>
</head>
<body>
<div class="box">
<div class="front">前</div>
<div class="back">后</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="up">上</div>
<div class="bottom">下</div>
</div>
</body>
</html>
静态结构 1 定一个父盒子 box 包装着6个小平面（立方体有6个面） 2 写6个面，先使用定位来重叠在一起（方便后面一个一个的调整他们的位置，构造立方体 ）
使用空间变换来实现立方体 1 前： z轴 正 移动 +100 2 后： z轴 负 移动 -100 3 左： x轴 负 移动 -100 y轴 旋转 90deg 4 右： x轴 正 移动 100 y轴 旋转 90deg 5 上： y轴 负 移动 -100 x轴 旋转 90deg 6 下： y轴 正 移动 100 x轴 旋转 90deg
