03-css3中的3D转换
一、CSS3-3D转换
1.3D
特点：近大远小，物体和面遮挡不可见
1.1三维坐标系
x 轴：水平向右 -- x 轴右边是正值，左边是负值
y 轴：垂直向下 -- y 轴下面是正值，上面是负值
z 轴：垂直屏幕 -- 往外边的是正值，往里面的是负值
2.3D移动tranlate3d
2.1 语法
transform:translate3d(x,y,z);
transform:translateZ(z);
2.2用法
.box3 {
/* 向里面移动100 */
transform: translateZ(-100px);
}
.box4 {
/* 向右移动50，向下移动50，向外移动50 */
/* translate3d */
transform: translate3d(50px, 50px, 50px);
}
.box5 {
/* 向里面移动100 */
/* translate3d里面的值不能省略，没有就写0 */
transform: translate3d(0, 0，-100px);
}
2.3总结
1.translate3d里面的3d要小写。
2.translate3d后面的值一定是三个值(x,y,z)，不能省略，没有的就写0，且顺序不能颠倒。
3.3d的z值一般都是精准的像素值。
4.z值为正数就是往外面移动，为负数就是往里面移动
3.透视perspective
1.产生3d效果必须写透视。
2.透视就是视距，即人眼到屏幕的距离。
3.近大远小
4.透视prespective的单位是像素
5.透视写在被观察元素的父盒子上。
4.3D转换之移动—translatedZ
给父元素加perspective后，再给子元素添加translateZ会产生近大远小。
body {
/* 人眼距屏幕500px */
perspective: 500px;
}
.box1 {
/*变小*/
transform: translateZ(-100px);
}
.box2 {
/*变大*/
transform: translateZ(100px);
}
5.3D转换之旋转—rotate
transform: rotateX(45deg)-- 沿着 x 轴正方向旋转 45 度transform: rotateY(45deg)-- 沿着 y 轴正方向旋转 45 度transform: rotateZ(45deg)-- 沿着 z 轴正方向旋转 45 度transform: rotate3d(x, y, z, 45deg)-- 沿着自定义轴旋转 45 deg 为角度
5.1 rotateX
transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度，即上边向后转
transform: rotateX(-45deg) -- 沿着 x 轴反方向旋转 45 度，即上边向前转
5.2 rotateY
transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度，即右边向后转
transform: rotateY(-45deg) -- 沿着 y 轴反方向旋转 45 度，即左边向后转
5.3 rotateZ
transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度，即顺时针
transform: rotateZ(-45deg) -- 沿着 z 轴反方向旋转 45 度，即逆时针
5.4 rotate3d
transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度
transform: rotate3d(1, 1, 0, 45deg) -- 沿着左上右下对角线旋转 45度
rotate()默认就是rotatez()。
6 3D呈现—transfrom-style
控制子元素是否开启三维立体环境 ，真3d。
6.1 用法
/* 给父元素加preserve-3d */
/* 默认是flat,不开启三维立体环境 */
/* transform-style: flat; */
transform-style: preserve-3d;
6.2总结
1.代码给父亲加，影响的是子元素
2.默认是flat,不开启，preserve-3d开启
3.作用是当父元素3d变换时，子元素任然保留之前的3d状态。
6.3 与视距的区别
preserve-3d是真3D，让子元素保留了3D空间。
perspective是伪3D，傻瓜式近大远小，只是起辅助视觉观察效果的作用。
7.案例
7.1翻转盒子案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 400px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
border-radius: 50%;
transition: all .3s;
/* 要保留子盒子的三维立体环境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.box::before,
.box::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 300px;
text-align: center;
border-radius: 50%;
font-size: 30px;
color: #fff;
}
.box::before {
content: "小艾同学";
background-color: #09f;
/* 提高层级，让他在前面 */
z-index: 1;
}
.box::after {
content: "加油鸭~";
background-color: #90f;
/* 先让盒子反过来，和before背靠背 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
7.2 3D旋转导航栏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
float: left;
margin: 100px 5px 0;
list-style: none;
width: 120px;
height: 35px;
perspective: 500px;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .4s;
}
/* 鼠标经过，向上翻转90度 */
.box:hover {
transform: rotateX(90deg);
}
.box::after,
.box::before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 35px;
text-align: center;
}
.box::before {
content: "小艾同学";
background-color: #f34;
/* 第二步，将这个盒子向外移动高度的一半 */
/* 原因是立方体旋转的轴是中心点，要让这两个盒子中心点一样 */
z-index: 1;
transform: translateZ(17.5px);
}
.box::after {
content: "要加油鸭~";
background-color: #09f;
/* 第一步：先让盒子向下移动高度的一半，再向前翻转90度 */
/* 位移写前面 */
transform: translateY(17.5px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box"></div>
</li>
<li>
<div class="box"></div>
</li>
<li>
<div class="box"></div>
</li>
<li>
<div class="box"></div>
</li>
<li>
<div class="box"></div>
</li>
<li>
<div class="box"></div>
</li>
<li>
<div class="box"></div>
</li>
</ul>
</body>
</html>
7.3 旋转相册
图片上传不了，可将案例中的图片任意替换
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* 透视 */
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 200px auto;
/* 使子元素保留三维立体空间 */
transform-style: preserve-3d;
/* 匀速循环播放10s */
animation: rotate 10s linear infinite;
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(images/xi.gif) no-repeat;
background-size: 300px;
}
section div:first-child {
/* 向外300 */
transform: translateZ(300px);
}
section div:nth-child(2) {
/* 先沿着y轴右内转60度，在向外移动300 */
/* 此时要先写旋转再写移动 */
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
/* 先沿着y轴右内转120度，在向外移动300 */
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
/* 先沿着y轴右内转180度，在向外移动300 */
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
/* 先沿着y轴右内转180度，在向外移动300 */
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
/* 先沿着y轴右内转180度，在向外移动300 */
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
7.4 立方体
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
transition: all 5s;
}
div[class ^=content] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
opacity: .5;
}
/* 前 */
.content1 {
/* 向外移动一半 */
transform: translateZ(100px);
background-color: #90f;
}
/* 后 */
.content2 {
/* 向里移动一半 */
transform: translateZ(-100px);
background-color: #99a;
}
/* 左 */
.content3 {
/* 先旋转90度，再向左移动一半 */
transform: rotateY(90deg) translateZ(-100px);
background-color: #09f;
}
/* 右 */
.content4 {
/* 先旋转90度，再向右移动一半 */
transform: rotateY(90deg) translateZ(100px);
background-color: #f34;
}
/* 上 */
.content5 {
/* 先沿x轴旋转180度，在向上移动一半 */
transform: rotateX(90deg) translateZ(-100px);
background-color: #f99;
}
/* 下 */
.content6 {
/* 先沿x轴旋转180度，在向下移动一半 */
transform: rotateX(90deg) translateZ(100px);
background-color: green;
}
.box:hover {
transform: rotate3d(1, 1, 1, 360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="content1">前</div>
<div class="content2">后</div>
<div class="content3">左</div>
<div class="content4">右</div>
<div class="content5">上</div>
<div class="content6">下</div>
</div>
</body>
</html>
7.5 相册
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
perspective: 1000px;
}
ul {
position: relative;
width: 300px;
height: 400px;
margin: 200px auto;
/* 旋转中线点在底部 */
transform-origin: bottom;
transition: transform .5s;
/* 开启3d状态 */
transform-style: preserve-3d;
}
ul:hover {
transform: rotateX(30deg);
}
ul li {
position: absolute;
top: 0;
left: 0;
list-style: none;
width: 100%;
height: 100%;
}
ul li img {
width: 100%;
height: 100%;
border: 5px solid #09f;
border-radius: 10px;
transform-origin: left;
/* 匀速过渡1s */
transition: transform linear 1s
}
ul:hover li:nth-child(5) img {
/* 给每一张图片设置延迟 */
transition-delay: .5s;
transform: rotateY(-180deg);
}
ul:hover li:nth-child(4) img {
transition-delay: 1s;
transform: rotateY(-150deg);
}
ul:hover li:nth-child(3) img {
transition-delay: 1.5s;
transform: rotateY(-120deg);
}
ul:hover li:nth-child(2) img {
transition-delay: 2s;
transform: rotateY(-50deg);
}
ul li:nth-child(1) img {
transform: rotateY(0deg);
}
</style>
</head>
<body>
<ul>
<li><img src="./images/01.jpg" alt=""></li>
<li><img src="./images/02.jpg" alt=""></li>
<li><img src="./images/03.jpg" alt=""></li>
<li><img src="./images/04.jpg" alt=""></li>
<li><img src="./images/05.jpg" alt=""></li>
</ul>
</body>
</html>
