1.空间位移：
1.transform: translateX(100px);
/* X轴水平位移 取值负数向左位移 取值正数向右位移 */
2.transform: translateY(100px);
/* Y轴垂直位移 取值负数向上位移 取值正数向下位移 */
3.transform: translateZ(100px);
/* Z轴空间位移 取值正数 视距增加 元素会被放大*/
/* Z轴空间位移 取值负数 视距减少 元素会被缩小*/
（正值：屏幕由内到外 负值：屏幕由外到内）
4.位移多值写法
/* 两种写法效果相同 */
transform: translateX(100px) translateY(100px) translateZ(100px);
transform: translate3d(100px,100px,100px);
2.透视效果：
- perspective: 1000px;（视距一般随意的设置 1000）
- 视距：人的眼睛到被看到的物品之间的距离
- 如何使用：要给被观察的物体的父元素使用
<!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>Document</title>
<style>
/* 视距：人的眼睛到被看到的物品之间的距离 */
/* 如何使用：要给被观察的物体的父元素使用 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 视距一般随意的设置 1000 */
perspective: 1000px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 200px auto;
transform: translateZ(500PX);
/*但我们想要看见元素在Z轴上的变化的时候 需要给被观察的物体添加视距
perspective: 1000px;
*/
/* 两种写法效果相同 */
transform: translateX(100px) translateY(100px) translateZ(100px);
transform: translate3d(100px,100px,100px);
}
</style>
</head>
<body>
<div>叼毛</div>
</body>
</html>
3.空间旋转：deg
1.空间旋转X轴:
1.transform: rotateX(-45deg)
<!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>空间旋转-X轴</title>
<style>
body {
background-color: #333;
}
.box {
width: 200px;
margin: 100px auto;
}
img {
width: 200px;
transition: all 2s;
}
.box {
/* 添加视距 */
perspective: 1000px;
}
.box img:hover {
transform: rotateX(-45deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pk1.png" alt="" />
</div>
</body>
</html>
2.空间旋转Y轴：
1.transform: rotateY(-50deg)
<!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>空间旋转-Y轴</title>
<style>
body {
background-color: #333;
}
.box {
width: 200px;
margin: 100px auto;
}
img {
width: 200px;
transition: all 2s;
}
.box {
perspective: 1000px;
}
.box img:hover {
transform: rotateY(-50deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pk1.png" alt="" />
</div>
</body>
</html>
3.空间旋转Z轴：
1.transform: rotateZ(-360deg);
<!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>空间旋转-Z轴</title>
<style>
.box {
width: 300px;
margin: 100px auto;
}
img {
width: 300px;
transition: all 2s;
}
.box img:hover {
transform: rotateZ(-360deg);
/* transform: rotate(360deg); */
}
</style>
</head>
<body>
<div class="box">
<img src="./images/hero.jpeg" alt="" />
</div>
</body>
</html>
4.沿着多条对称轴（X,Y,Z）旋转
1.transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
2.transform: rotate3d(x,y,z,deg);
<!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>空间旋转-X轴</title>
<style>
body {
background-color: #333;
}
.box {
width: 200px;
margin: 100px auto;
}
img {
width: 200px;
transition: all 2s;
}
.box {
perspective: 800px;
}
.box img:hover {
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pk1.png" alt="" />
</div>
</body>
</html>
4.立方体：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 200px;
height: 200px;
/* background-color: aqua; */
position: relative;
margin: 200px auto;
transform-style: preserve-3d;
transform: rotate3d(1,1,1,30deg);
transition: all 20000s;
/* opacity: 0.8; */
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
}
.front {
/* 前面 */
background-color: salmon;
background-image: url(./立方体/preview.jpg);
background-size: 100%;
transform: translateZ(100px);
/* opacity: 0.8; */
}
.back {
/* 后面 */
background-color: seagreen;
background-image: url(./立方体/preview.jpg);
background-size: 100%;
transform: translateZ(-100px) rotateY(180deg);
/* opacity: 0.8; */
}
.left {
background-color: lawngreen;
background-image: url(./立方体/preview.jpg);
background-size: 100%;
transform: translateX(-100px) rotateY(90deg);
/* opacity: 0.8; */
}
.right {
background-color: yellow;
background-image: url(./立方体/preview.jpg);
background-size: 100%;
transform: translateX(100px) rotateY(90deg);
/* opacity: 0.8; */
}
.up {
background-color: aqua;
background-image: url(./立方体/preview.jpg);
background-size: 100%;
transform: translateY(-100px) rotateX(90deg);
/* opacity: 0.8; */
}
.bottom {
background-color: purple;
background-image: url(./立方体/preview.jpg);
background-size: 100%;
transform: translateY(100px) rotateX(-90deg);
/* opacity: 0.8; */
}
body:hover .box{
transform: rotate3d(1,1,1,3000000deg);
}
</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.静态结构
1.定义一个父盒子box 抱着6个小平面（立方体的6个面）
2.写6个面 ：1.先使用定位 来重叠在一起（后面方便一个一个来调他们的位置 来构建立方体）-->
<!-- 2.使用空间转换来构建立方体
1.前：Z轴 正 移动 100px （50%）
2.后：Z轴 负 移动 -100px （50%）
3.右：X轴 正 移动 100px （50%） Y轴 旋转 90deg
4.左：X轴 负 移动 -100px （50%） Y轴 旋转 90deg
5.下：Y轴 正 移动 100px （50%） X轴 旋转 90deg
6.上：Y轴 负 移动 -100px （50%） X轴 旋转 90deg
3.开启立体空间： transform-style: preserve-3d;
旋转 transform: rotate3d(1,1,1,50deg);
-->
5.立体导航：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
width: 300px;
height: 40px;
margin: 50px auto;
}
li {
float: left;
height: 40px;
list-style: none;
transition: 0.5s;
/* 开启 3D */
transform-style: preserve-3d;
/* 开启上帝视角，通过旋转(ps) */
/* transform: rotateX(-20deg) rotateY(30deg); */
}
a {
display: block;
width: 100px;
height: 40px;
text-decoration: none;
color: #fff;
text-align: center;
line-height: 40px;
}
li a:first-child {
background-color: green;
/* 往Z轴正方向移动20px */
transform: translateZ(20px);
}
li a:last-child {
background-color: orange;
/* 向上平移60px,往页面里面沿着X轴正方向旋转90deg */
transform: translateY(-60px) rotateX(90deg);
}
li:hover {
/* 沿着X轴负方向旋转90deg */
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">首页</a>
<a href="#">index</a>
</li>
<li>
<a href="#">登录</a>
<a href="#">login</a>
</li>
<li>
<a href="#">注册</a>
<a href="#">register</a>
</li>
</ul>
</body>
</html>
6空间缩放：
1.transform:scaleX(X轴缩放) 宽度缩放
2.transform:scaleY(Y轴缩放) 高度缩放
3.空间缩放: transform:scaleZ(Z轴缩放) 厚度缩放
4.空间缩放: transform:scale3d(x,y,z) 同时缩放长宽
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
width: 300px;
height: 40px;
margin: 50px auto;
}
li {
float: left;
height: 40px;
list-style: none;
transition: 0.5s;
/* 开启 3D */
transform-style: preserve-3d;
/* 开启上帝视角，通过旋转(ps) */
/* transform: rotateX(-20deg) rotateY(30deg); */
}
a {
display: block;
width: 100px;
height: 40px;
text-decoration: none;
color: #fff;
text-align: center;
line-height: 40px;
}
li a:first-child {
background-color: green;
/* 往Z轴正方向移动20px */
transform: translateZ(20px);
}
li a:last-child {
background-color: orange;
/* 向上平移60px,往页面里面沿着X轴正方向旋转90deg */
transform: translateY(-60px) rotateX(90deg);
}
li:hover {
/* 沿着X轴负方向旋转90deg */
transform: rotateX(-90deg) scale3d(1.1,1.1,1.1);
}
/* 空间缩放: transform:scaleX(X轴缩放) 宽度缩放;
/* 空间缩放: transform:scaleY(Y轴缩放) 高度缩放;
/* 空间缩放: transform:scaleZ(Z轴缩放) 厚度缩放;
/* 空间缩放: transform:scale3d(x,y,z) 同时缩放长宽高;
*/
</style>
</head>
<body>
<ul>
<li>
<a href="#">首页</a>
<a href="#">index</a>
</li>
<li>
<a href="#">登录</a>
<a href="#">login</a>
</li>
<li>
<a href="#">注册</a>
<a href="#">register</a>
</li>
</ul>
</body>
</html>
