空间转换
属性:transform 可以实现平移、缩放、旋转(也叫3D转换)
X、Y、Z轴方向的确认
- X:沿着屏幕从左往右即是X轴正方向
- Y:沿着屏幕从上往下即是Y轴正方向
- Z:沿着屏幕从里往外即是Z轴正方向
左手法则:判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
视距(perspective)
属性:perspective
取值:像素单位数值, 数值一般在800 – 1200px
用法:为转换元素的父盒子添加,可达成近大远小
透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
平移
transform:translate3D(X,Y,Z)
transform:translateX
transform:translateY
transform:translateZ
缩放
缩放同平面缩放基本一样,只不过是增加了一个视距属性,在立体环境下会近大远小
旋转
- transform: rotateZ(值);
- transform: rotateX(值);
- transform: rotateY(值);
同时需要给父盒子添加transform-style:preserve-3d才能使得子盒子处于立体空间
(perspective只增加近大远小、近实远虚的视觉效果)
旋转综合案例
<!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>
.father {
width: 300px;
margin: 300px auto;
}
.box {
position: relative;
float: left;
width: 100px;
height: 40px;
transform-style: preserve-3d;
perspective: 1000px;
transition: 1s;
}
.front,
.index {
position: absolute;
width: 100%;
height: 100%;
line-height: 40px;
text-align: center;
color: #fff;
}
.front {
transform: translateZ(20px);
background-color: green;
}
.index {
transform: translateY(-20px) rotateX(90deg);
background-color: yellow;
}
.box:hover {
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="father">
<div class="box">
<div class="front">首页</div>
<div class="index">index</div>
</div>
<div class="box">
<div class="front">登录</div>
<div class="index">login</div>
</div>
<div class="box">
<div class="front">注册</div>
<div class="index">register</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>07-立方体.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 200px;
height: 200px;
background-color: aqua;
position: relative;
margin: 100px auto;
transform-style: preserve-3d;
transition: 500s;
}
.box:hover {
transform: rotate3d(1, 1, 1, 30000deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.front {
transform: translateZ(100px);
background-color: salmon;
}
.back {
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 {
transform: translateY(100px) rotateX(90deg);
background-color: aqua;
}
.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 静态结构
1 定一个父盒子 box 包装着6个小 平面 (立方体 有6个面)
2 写6个面
1 先使用定位 来重叠在一起 (方便后面一个一个的调整他们的位置 构造立方体 )
2 使用 空间变换来实现 立方体!!
1 前: z轴 正 移动 +100
2 后: z轴 负 移动 -100
3 提前检查一下 有效果
1 给box 开启立体空间效果-立体呈现 3d呈现
2 给box 旋转