CSS笔记(26)
3D转换
三维坐标系
- x轴:水平向右
- y轴:垂直向下
- z轴:垂直屏幕 注意: 往外面是正值,往里面是负值(肥肠重要!).
主要知识点
- 3D位移: translate3d(x,y,z)
- 3D旋转: rotate(x,y,z)
- 透视perspective
- 3D呈现: transform-style
3D移动之translate3d
其中,xyz都是不能省略的,没有的话就写0.
透视perspective
在2D平面产生近大远小视觉立体,但是效果是二维的.
- 如果想要网页产生3D效果需要透视(理解成3D物体投影在2D平面内).
- 模拟人类的视觉位置,可认为安排一只眼睛去看.
- 透视,我们也称视距,就是人的眼睛到屏幕的距离.
- 距离视觉点越近在电脑上成像越大,越远成像越小.(也就是说,视距越小,越靠近屏幕,看到的成像越大)
- 透视的单位是像素
透视写在被观察的父盒子上面
d:就是视距,即我们的眼睛到屏幕的距离.
z:就是z轴
body {
perspective:300px;
}
.bb {
margin: 0 auto;
width: 200px;
height: 200px;
background-color: pink;
transform: translate3d(400px,100px,100px);
}
</style>
</head>
<body>
<div class="bb"></div>
</body>3D旋转之rotate3d
3D旋转指可以让元素平面内沿着x轴,y轴,z轴或者自定义进行旋转.
语法:
现在我们做一个让小猪佩奇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;
}
img {
display: block;
margin: 100px auto;
transition: all 2s;
}
img:hover {
transform: rotateX(360deg);
}
</style>
</head>
<body>
<img src="../images/pig.jpg" alt="">
</body>
</html>
我们可以通过左手准则来判断元素朝哪个方向转动.
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度(了解即可)
xyz是代表旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度.
假如说,我们设置旋转的矢量是(1,1,0,45deg),那么就是沿着下图的轴旋转.
看一个动图理解一下:
做到现在发现有一些透视效果火狐居然不能显示出来,所以现在在将vscode的liveserver的默认浏览器换成Chrome的,结果居然一直打不开,现在正在解决...
重装了一次Chrome以后就可以了...
3D呈现之transform-style
- 控制子元素是否开启三维立体环境.
- transform-style:flat子元素不开启3d立体空间,这是默认的.
- transform-style:preserve-3d子元素开启立体空间.
- 代码写给父级,但是影响的是子盒子.
- 这个属性很重要,后面必用.
现在我们要做一个小案例:
我现在已经做到了这一步:用整个box装两个盒子,一个是粉色的,一个是黄色的,我们给黄色的盒子一个沿X轴转60度的旋转,给body500px的透视.出来的效果是这样的:
但是当我想要这个盒子转过去的时候,出现了这样的状况:
可以看到,黄色盒子的旋转的效果突然变回二维平面的.
变成了这样的效果
现在我们就给我们的父盒子box加上一个transform-style:preserve-3d,看看效果如何:
现在便有了立体的效果嘿嘿.
刚刚又做了一个案例,还是稍稍有点难的,主要是很难想:
主要的思路:
先放一个大的盒子.box,然后再在里面放两个小盒子,一个是正面.front,一个是背面.back,给两个盒子设置好大小和文字之类的属性,最后再让整个盒子旋转. 就可以得到上面的旋转图.
重点来了:
- 当我们给两个盒子设置了定位以后,出现在上面的是back盒子,因为back盒子在结构中处于下面,必然会把正面的盒子压住.
- 如何让正面反过来的时候出现背面的盒子且是正确显示的呢?按理来说,背后的盒子如果直接翻转过来,文字是反的.
- 最后翻转的时候盒子的背面显示不出来.
解决方法:
- 我们可以使用z-index,给.front来个1的z-index值.front盒子就可以显示在上面了.
- 我们可以首先让两个盒子处于"背对背拥抱"的位置,也就是说,先给背面的盒子沿着Y轴旋转180度.
- 因为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>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
transform-style: preserve-3d;
}
.front,
.back {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #fff;
}
.back {
background-color: seagreen;
/* 先让背面的盒子转108度到背面去 */
transform: rotateY(180deg);
}
.front {
background-color: salmon;
z-index: 1;
}
.box:hover {
transform: rotateY(180deg);
/* z-index: 0; */
}
</style>
</head>
<body>
<div class="box">
<div class="front">
你好
</div>
<div class="back">
再见
</div>
</div>
</body>
</html>刚刚又做了一个案例,实在是太累了,我自己想了很久才做好,中间出了很多岔子,好在还是做出来的,但是还是有点点问题....
重点!!!如果移动(translate)的属性和其他属性同时出现,必须先写translate!!!
今天学得很累,就不做多解释了...
<!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; */
transform-style: preserve-3d;
}
.box {
float: left;
transform-style: preserve-3d;
position: relative;
width: 100px;
height: 50px;
margin: 100px 10px;
transition: all .5s;
}
.front,
.down {
position: absolute;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
color: #fff;
}
.front {
background-color: salmon;
z-index: 1;
}
.down {
top: 25px;
background-color: sandybrown;
transition: all 2s;
/* 270deg或者-90deg都是可以的 */
transform: translateZ(-25px) rotateX(270deg);
}
.box:hover{
/* 如果有移动和其他的属性同时出现,必须把移动写在前面!!!!!!!! */
transform: translateY(-25px) rotateX(90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">你好</div>
<div class="down">再见</div>
</div>
<div class="box">
<div class="front">你好</div>
<div class="down">再见</div>
</div>
<div class="box">
<div class="front">你好</div>
<div class="down">再见</div>
</div>
<div class="box">
<div class="front">你好</div>
<div class="down">再见</div>
</div>
<div class="box">
<div class="front">你好</div>
<div class="down">再见</div>
</div>
</body>
</html>腾讯云开发者
