一、3D转换
1.1 什么是3D转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。
1.2 3D转换的特点
1.近大远小。
2.物体后面遮挡不可见。
1.3 三维坐标系
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
x轴:水平向右 注意: x 右边是正值,左边是负值
y轴:垂直向下 注意: y 下面是正值,上面是负值
z轴:垂直屏幕 注意: 往外面是正值,往里面是负值
二、3D移动translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。
transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离。
translform:translateX(100px):仅仅是在x轴上移动。
translform:translateY(100px):仅仅是在Y轴上移动。
translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ只能跟px单位)。
因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动
translform:translateZ(100px):仅仅是在Z轴上移动。 有了透视,就能看到translateZ 引起的变化了 。
未加透视 加了透视
.box {
perspective: 500px;
}
.box1 {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
transform: translate3d(100px, 100px, 100px);
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
三、透视perspective (单位px)
d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。
z:就是 z轴,物体距离屏幕的距离,z轴越大(正值) 我们看到的物体就越大。
模拟人类的视觉位置,可认为安排一只眼睛去看
距离电脑平面的距离为视距
距离视觉点越近的在电脑平面成像越大,越远成像越远
perspective的值越大,物体看到的物体越小,perspective的值越小,看到的物体越大。
透视写在被观察元素的父盒子上面
四、3D旋转rotate3d
4.1左手准则
3D旋转指可以让元素在三维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转,对于元 素旋转的方向的判断 我们需要先学习一个左手准则。
左手的大拇指指向 x/y/z轴的正方向
其余手指的弯曲方向就是该元素沿着x/y/z轴旋转的方向
4.2 语法
transform:rotateX(45deg):沿着x轴正方向旋转 45度
transform:rotateY(45deg) :沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) :沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)
例如:transform:rotate3d(1,1,1,180deg);
body {
perspective: 200px;
}
img {
display: block;
margin: 100px auto;
transition: all 2s;
}
img:hover {
/* transform: rotateX(180deg); */
/* transform: rotateY(180deg); */
/* transform: rotateZ(180deg); */
transform: rotate3d(1, 1, 1, 180deg);
}
</style>
</head>
<body>
<img src="../sfimages/1.jpg" alt="">
</body>
五、3D呈现 transfrom-style
控制子元素是否开启三维立体环境。
给父亲添加影响的是子盒子。
Transform-style: preserve-3d; 子元素开启立体空间,默认的值是 flat 不开启
未开启三维立体空间
未开启三维立体空间
注意
1.当一个盒子既要旋转又要移动时,要根据你想要达到的效果来进行操作,旋转之后的盒子它的X,Y,Z坐标也会随之变化。
2.transform-style和perspective都是给盒子的父级或者祖先元素添加。
3.tansform-style非常的重要,只要你用3D转换,这个属性基本上必写。