admin管理员组文章数量:1130349
一、三维坐标系
三维直角坐标系其实是指立体空间，立体空间是由3个轴共同组成的
- x轴：水平向右 x右边是正值，左边为负值
- y轴：垂直向下 y下面是正值，上面是负值
- z轴：垂直屏幕 往外是正值，往里面是负值
二、位移 translate
- transform: translateX(100px)：仅仅是在x轴上移动
- transform: translateY(100px)：仅仅是在y轴上移动
- transform: translateZ(100px)：仅仅是在z轴上移动
- transform: translate3d(x,y,z)：其中x,y,z分别x,y,z分别指要移动轴的方向的距离
三、透视 perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
- 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
- 模拟人类的视觉位置，可认为安排一只眼睛去看
- 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像就越小
- 透视的单位是像素
透视写在被观察元素的父盒子上
四、旋转 rotate
3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法：
- transform: rotateX(45px)：沿着x轴正方向旋转45度
- transform: rotateY(45px)：沿着x轴正方向旋转45度
- transform: rotateZ(45px)：沿着x轴正方向旋转45度
- transform: rotate3D(x,y,z,deg)：沿着自定义轴旋转，deg为角度
五、呈现 transform-style
- 控制子元素是否开启三维立体环境
- transform-style: flat; 子元素不开启3d立体空间，默认的
- transform-style:preserve-3d; 子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
六、具体案例
左右两面翻转的盒子
1）搭建HTML结构
- box父盒子里面包含前后两个子盒子
- box是翻转的盒子 front是前面盒子 back是后面盒子
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="back">可爱又漂亮</div>
</div>
2） CSS样式
- box指定大小，切记要添加3d呈现
- back盒子要沿着Y轴旋转180度
- 最后鼠标经过box沿着Y轴旋转180deg
body {
perspective: 400px;
}
.box {
width: 300px;
height: 300px;
margin: 100px auto;
transitinon: all .4s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
.font,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: pink;
}
.black {
background-color: purple;
tranform: rotateY(180deg);
}
上下翻转的盒子
1）搭建HTML结构
- .box是翻转的盒子 front是前面的盒子，bottom是底下的盒子
<ul>
<li>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
</li>
</ul>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
float: left;
margin: 0 5px;
width: 120px;
height: 35px;
list-style: none;
/* 需要给box旋转，也需要透视，所以给li加透视，里面所有盒子都有透视效果 */
perspective: 500px;
}
.box {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .4s;
}
.box:hover {
transform: rotateX(90px);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
}
.front {
backgroun-color: pink;
z-index: 1;
tranform: translateZ(17.5px);
}
.bottom {
background-color: purple;
/* 必须先移动，后翻转 */
transform: translateY(17.5px) rotateX(-90deg);
}
一、三维坐标系
三维直角坐标系其实是指立体空间，立体空间是由3个轴共同组成的
- x轴：水平向右 x右边是正值，左边为负值
- y轴：垂直向下 y下面是正值，上面是负值
- z轴：垂直屏幕 往外是正值，往里面是负值
二、位移 translate
- transform: translateX(100px)：仅仅是在x轴上移动
- transform: translateY(100px)：仅仅是在y轴上移动
- transform: translateZ(100px)：仅仅是在z轴上移动
- transform: translate3d(x,y,z)：其中x,y,z分别x,y,z分别指要移动轴的方向的距离
三、透视 perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
- 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
- 模拟人类的视觉位置，可认为安排一只眼睛去看
- 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像就越小
- 透视的单位是像素
透视写在被观察元素的父盒子上
四、旋转 rotate
3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法：
- transform: rotateX(45px)：沿着x轴正方向旋转45度
- transform: rotateY(45px)：沿着x轴正方向旋转45度
- transform: rotateZ(45px)：沿着x轴正方向旋转45度
- transform: rotate3D(x,y,z,deg)：沿着自定义轴旋转，deg为角度
五、呈现 transform-style
- 控制子元素是否开启三维立体环境
- transform-style: flat; 子元素不开启3d立体空间，默认的
- transform-style:preserve-3d; 子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
六、具体案例
左右两面翻转的盒子
1）搭建HTML结构
- box父盒子里面包含前后两个子盒子
- box是翻转的盒子 front是前面盒子 back是后面盒子
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="back">可爱又漂亮</div>
</div>
2） CSS样式
- box指定大小，切记要添加3d呈现
- back盒子要沿着Y轴旋转180度
- 最后鼠标经过box沿着Y轴旋转180deg
body {
perspective: 400px;
}
.box {
width: 300px;
height: 300px;
margin: 100px auto;
transitinon: all .4s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
.font,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: pink;
}
.black {
background-color: purple;
tranform: rotateY(180deg);
}
上下翻转的盒子
1）搭建HTML结构
- .box是翻转的盒子 front是前面的盒子，bottom是底下的盒子
<ul>
<li>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
<div class="box">
<div class="front">辣味蓓蓓酱</div>
<div class="bottom">可爱又漂亮</div>
</div>
</li>
</ul>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
float: left;
margin: 0 5px;
width: 120px;
height: 35px;
list-style: none;
/* 需要给box旋转，也需要透视，所以给li加透视，里面所有盒子都有透视效果 */
perspective: 500px;
}
.box {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .4s;
}
.box:hover {
transform: rotateX(90px);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
}
.front {
backgroun-color: pink;
z-index: 1;
tranform: translateZ(17.5px);
}
.bottom {
background-color: purple;
/* 必须先移动，后翻转 */
transform: translateY(17.5px) rotateX(-90deg);
}
本文标签： 位移透视translatestyletransform
版权声明：本文标题：CSS3 之 3D转换——位移translate、透视perspective、旋转rotate、呈现transform-style 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1758712790a2783211.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论