一、3D转换(变换)
1.3d转换是改变标签在3坐标系上的位置和形状的一种技术
3D特点:
- 近大远小。
- 物体后面遮挡不可见
1.1.3维坐标系
3维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的
- x轴 水平向右 注意: x 右边是正值,左边是负值
- y轴 垂直向下 注意: y 下面是正值,上面是负值
- z轴 垂直屏幕 由屏幕里面指向屏幕的外面 注意: 往外面是正值,往里面是负值
2.3d移动translate3d
3d移动在2d移动的基础上多加了一个可以移动的方向,就是z轴方向
语法:
(1) transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离,xyz是不能省略的,如果没有就写0
(2) translform:translateX(100px) 仅仅是移动在x轴上移动
(3) translform:translateY(100px) 仅仅是移动在Y轴上移动
(4) translform:translateZ(100px) 仅仅是移动在Z轴上移动
注意:
因为z轴是垂直屏幕,由里指向外面,所以 默认是看不到元素在z轴的方向上移动,想要看到,可以使用下面的 视距 属性设置
2.1.视距 perspective(了解)
- 人在看物体时,有个规律,如 远的物体看起来小 近的物体看起来大
- **perspective视距:就是用来设置 人 和 物体 的距离
上图总结:
(1)d:视距,眼睛到屏幕的距离,视距与物体大小的关系成反比。 (近大远小 : 视距变小,眼睛离屏幕越来越近,物体离眼睛越来越近,物体变大----近大 )
(2)z:translateZ,物体距离屏幕的距离,z轴距离与物体大小的关系成正比。 (近大远小:translateZ变大,物体离眼睛越近,物体变大 ----- 近大)
(3)z,并不是z轴,其实是translateZ。视距和translateZ其实都是在Z轴上的距离。
(4)perspective ,透视,理解为视距。 (也可以理解为3D眼睛,给元素添加3D效果,并且想看到,必须带上3D眼睛,给父亲添加perspective )
perspective字面意思是:透视。
e.g.
(1)设置物体的 translateZ
一般大于 0 如 transform:translateZ(100px)
(2)设置 人和物体的距离 ( 视距) 这个值规定要设置给物体的父元素 perspertive:1000px
(3)动态改变物体的 translateZ
即可观察效果
注意: 这个效果很像放大效果,但其实是不一样的。
2.2.perspective与translateZ
d:视距,眼睛到屏幕的距离,视距与物体大小的关系成反比。
z:translateZ,物体距离屏幕的距离,轴距离与物体大小的关系成正比。
从上述结果中发现,perspective与translateZ都可以调整物体的大小。那么我们要使用哪个呢?
perspective是给父元素添加的,而translateZ是给自己添加的。
我们可能会碰到这样的情况,一个父盒子中有多个子盒子。我们给父盒子设置一个固定的视距perspective,然后子盒子设置不同的translateZ,这样子盒子就会有一个相同视距下的不同的大小。
而且,物体想实现3D效果,必须添加透视perspective。
如何使用:
父元素添加一个固定的perspective,子元素再添加translateZ,才会有3D效果。
必须配合使用。
虽然两个都可以让盒子大小改变,但是必须配合使用才行。
让盒子变大变小,一般不会改变perspective,而是是调整translateZ来改变。
2.3.总结:
(1)translateZ的值和perspertive都要大于0 否则容易出现兼容性问题
(2)translateZ:近大远小(translateZ距离近(值越大)物体越大,近大)
(3)translateZ:往外是正值
(4)translateZ:往里是负值
3.3d旋转rotate3d
3.1.介绍
3d旋转指可以让元素在3维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转
语法:
transform:rotateX(45deg):沿着x轴正方向旋转 45度
transform:rotateY(45deg) :沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) :沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)
3.2.rotateX
旋转的度数有正负,正负值往哪边旋转,这个是有规律的。我们看左手准则:
左手准则:
对于元素旋转的方向的判断 我们需要先学习一个左手准则
比如要判断某元素沿着x轴是怎么旋转的
(1)左手的手拇指指向 x轴的正方向
(2)其余手指的弯曲方向就是该元素沿着x轴旋转的方向了
总结:rotateX( 正值 ),旋转方向是向后倒,向屏幕里旋转。
3.3.rotateY
Y轴方向旋转的正负值,也是影响了旋转的方向,方向如何区分?依然看左手准则:
左手准则:
(1)左手的手拇指指向 y轴的正方向
(2)其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)
如图:
3.4.rotateZ
左手准则
z轴正方向是屏幕到眼睛的方向,四指的方向是顺时针方向(反之逆时针)
3.5.rotate3d-自定义轴(了解)
语法:
transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)
- xyz是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度。
- transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg
- transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg
理解:
矢量(vector)是一种既有大小又有方向的量,又称为向量。
xyz是矢量,x指定1说明沿着x轴旋转。0说明不沿着x轴旋转。(0,1有大小,又代表x或y或z,也有方向)
4.3D呈现transform-style
4.1.介绍
- 控制子元素是否开启三维立体环境。
- transform-style: flat 子元素不开启3d立体空间 默认的 (flat:平的,平面)
- transform-style: preserve-3d; 子元素开启立体空间(preserve:[prɪˈzɜ:v] 保持)
- 代码写给父级,但是影响的是子盒子
- perspective是开启3D效果,transform-style: preserve-3d是保持3D效果 ***
- 这个属性很重要,后面必用
上图效果不佳,看下图:
完整代码:
<style>
body {
perspective: 500px; /* 让子盒子有3D效果,其实也可以添加给.box */
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s; /* 悬浮旋转添加过渡效果 */
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
}
.box:hover { /* 悬浮在外层盒子上,进行y轴旋转 */
transform: rotateY(60deg);
}
.box div { /* 子绝父相,通过定位让俩div与box位置重叠 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {/* 第二个div,x轴旋转,向后倒 */
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
4.2.perspective 和 transform-style 区别
(1)perspective 有继承性 ,可以给父元素,爷爷辈的添加
(2)transform-style 没有继承性,只能给要保持3D效果的元素的直接父元素添加
body {
/*perspective 有继承性 ,可以给父元素,爷爷辈的添加.... */
/* 这个案例,只能给body添加此属性,section和div都需要有近大远小的效果 */
/* 近大远小 */
perspective: 1000px;
/* transform-style 没有继承性,只能给要保持3D效果的元素的直接父元素添加 */
/* 我们现在希望每个div保持3D效果,只能给section添加此属性 */
/* 让子元素保持3D效果 */
/* transform-style: preserve-3d; */
}
二、浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加
1. 私有前缀
- -moz-:代表 firefox 浏览器私有属性
- -ms-:代表 ie 浏览器私有属性
- -webkit-:代表 safari、chrome 私有属性
- -o-:代表 Opera 私有属性
2. 提倡的写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;