1、3D的特点

进大远小
物体后面遮挡不可见

x:右为正
y:下为正
z:屏幕外是正，往里是负

2、3D移动之translate

transform:translateX(100px);//仅仅是x轴移动。px或百分比
transform:translateY(100px);//仅仅是y轴移动，px或百分比
transform:translateZ(100px);//仅仅是z轴移动，一般用px单位
transform:translate3D(x,y,z);//x,y,z移动，均不可省略，可以写0

透视 perspactive

想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
透视也叫视距：人的眼睛到屏幕的距离
距离视觉点越近在电脑屏面成像越大，透视值越小，物体看着越大
透视的单位是像素

注意：

透视是写在被观察元素的父盒子里的

transtlateZ

1、要搭配perspactive使用，只写translateZ的话，看不出3d在z轴的移动效果
2、透视是写在被观察元素的父盒子里的
3、透视值越大，表示视距越大，代表眼睛离物体越远，视觉效果越小
4、translateZ值越大，表示物体离屏幕外越近，视觉效果看着越大

<!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>body{perspective: 500px;}div{width: 100px;height: 100px;margin: 100px auto;background-color: orange;transform: translate3d(0,0,100px);}</style>
</head>
<body><div></div>
</body>
</html>

3d移动和透视

3、3D旋转rotate3d

可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转

transform:rotateX(45deg);//沿着x轴正方向旋转45度
transform:rotateY(45deg);//沿着y轴正方向旋转45度
transform:rotateZ(45deg);//沿着z轴正方向旋转45度
transform:rotate3d(x,y,z,deg);//沿着自定义轴（矢量）旋转deg度

左手弯曲，拇指指向x、y正方向，四指弯曲方向就是该元素沿x轴\y轴旋转的正方向

<!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>body{perspective: 500px;}img {width: 200px;height: 200px;margin: 50px;transition: all 3s ;}.dog1:hover{transform: rotateX(360deg);}.dog2:hover{transform: rotateY(360deg);}.dog3:hover{transform: rotateZ(360deg);}.dog4:hover{transform: rotate3d(100,100,100,360deg);}</style>
</head><body><img class="dog1" src="../images/猛男.jpg" alt=""><img class="dog2" src="../images/猛男.jpg" alt=""><img src="../images/media/pic.jpg" alt="" class="dog3"><img class="dog4" src="../images/猛男.jpg" alt=""><!-- mmss -->
</body></html>

3d旋转

3D呈现transform-style**

控制子元素是否开启三维立体环境
transform-style:flat;子元素不开启3d立体空间（默认/不写）
transform-style:preserve-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>Document</title><style>body{perspective: 500px;}.box{position: relative;width: 200px;height: 200px;background-color: purple;margin: 100px auto;transform-style: preserve-3d;transition: all 2s;}.box:hover{transform: rotateY(70deg);}.box div{position: absolute;top: 0;left:0;width: 100%;height: 100%;background-color: orange;}.box div:last-child{background-color: olivedrab;transform: rotate3d(1,0,0,70deg);}</style>
</head>
<body><div class="box"><div>1</div><div>2</div></div>
</body>
</html>

3d呈现

练习

1、两面翻转

<!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>body{perspective: 500px;}.box{position: relative;width: 200px;height: 200px;margin: 100px auto;transition: all 2s;transform-style: preserve-3d;}.box:hover{transform: rotateY(180deg);}.front,.back{position: absolute;top:0;left: 0;width: 100%;height: 100%;line-height: 200px;font-size: 20px;text-align: center;color: #ddd;background-color: black;border-radius: 50%;backface-visibility: hidden;}.front{transform: translateZ(1px);/* z-index: 1;不生效 */}div.back{background-color: skyblue;transform: rotateY(180deg);}</style>
</head>
<body><div class="box"><div class="front">青山不改</div><div class="back">绿水长流</div></div>
</body>
</html>

3d两面翻转

2、3d导航栏

bottom的盒子先移到（想像为正方体）底部：先向下移动在沿x轴旋转-90度
然后把face盒子，向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>ul{margin: 100px;}ul li{float: left;/* perspective: 500px; */margin: 30px;width: 100px;height: 50px;list-style: none;}.nav{position: relative;transform-style: preserve-3d;width: 100px;height: 50px;transition: all 0.4s;}.face,.bottom{position: absolute;top:0;left:0;width: 100%;height: 100%;}.face{background-color: green;transform: rotateZ(25px);}.bottom{background-color: aquamarine;/* 先写移动 */transform: translateY(50%) rotateX(-90deg) ;}.nav:hover{transform:  rotateX(90deg);}</style>
</head><body><ul><li><div class="nav"><div class="face">1</div><div class="bottom">2</div></div></li><li><div class="nav"><div class="face">3</div><div class="bottom">4</div></div></li><li><div class="nav"><div class="face">5</div><div class="bottom">6</div></div></li></ul></body></html>

3d导航栏

3、旋转木马

先旋转再移动，用到动画属性

<!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>body{perspective: 1000px;background-color: #ccc;}img{width: 200px;height: 200px;}section{position: relative;width: 200px;height: 300px;margin: 200px auto;transform-style: preserve-3d;transition: all .4s;animation: move 20s  linear infinite;/* background: url(../images/media/bg2.png) no-repeat; */}section:hover{animation-play-state:paused;}@keyframes move{0%{transform: rotateY(0);}100%{transform: rotateY(360deg);}}@keyframes run{0%{background-position: 0;}100%{background-position: -1600px 0;}}section div{position: absolute;top:0;left: 0;width: 100%;height: 100%;background: url(../images/media/bear.png) no-repeat;animation: run 1s infinite steps(8);}section div:nth-child(1){transform: translateZ(300px);}section div:nth-child(2){transform: rotateY(60deg) translateZ(300px) ;}section div:nth-child(3){transform: rotateY(120deg) translateZ(300px) ;}section div:nth-child(4){transform: rotateY(180deg) translateZ(300px) ;}section div:nth-child(5){transform: rotateY(240deg) translateZ(300px) ;}section div:nth-child(6){transform: rotateY(300deg) translateZ(300px) ;}section div:last-child{transform: rotateY(0) translateZ(0) ;animation:0;}</style>
</head>
<body><section><div></div><div></div><div></div><div></div><div></div><div></div><div class="mid"></div></section>
</body>
</html>

旋转的熊

35.前端笔记-CSS3-3D转换相关推荐

（28）css3 3D转换
transform 属性不止能实现 2D 转换,也可以制作 3D 立体转换效果,比普通的 x.y 轴组成的平面效果多了一条 z 轴,如下图: 一.透视电脑显示屏是一个 2D 平面,图像之所以具有立体 ...
html3d转换,CSS3 3D 转换
# CSS3 3D 转换 ## 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: * rotateX() * rotateY() 点击下 ...
CSS3 3D转换和旋转木马案例
文章目录前言有什么特点一.三维坐标系 3D转换二.3D移动translate3d 三.透视perspective 四.translateZ 五.3D旋转rotate3d 六. 3D呈现tran ...
CSS3提高： CSS3 3D转换
3D 转换我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子. 有什么特点近大远小. 物体后面遮挡不可见我们在网页上构建3D效果的时候参考这些特点就能产出3D效果. 三维坐标系三维坐 ...
css3 3d旋转兼容模式下,CSS3 3D 转换
3D Transforms CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法:rotateX() rotateY() 点击下面的元素,来查看 2D 转 ...
学习CSS3 3D转换，制作一个3D立方体
要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的地方,这里把我学习的方法,过程 ...
CSS3 3D转换之3D旋转 rotate
一.沿着X轴旋转 rotateX 立体感不够,可以加一个透视perspective,注意要加在观察元素的父盒子上面就可以变成这个样子二.沿着Y轴旋转 rotateY transform: rot ...
前端:使用CSS3实现酷炫的3D旋转透视
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等.它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感.所以说,为了让自己更加优秀,css3 ...
CSS3新特性(属性选择器、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀）
这里写目录标题一.CSS3 属性选择器二.CSS3 结构伪类选择器三. CSS3 伪元素选择器四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...

35.前端笔记-CSS3-3D转换