3D转换
三维坐标系
主要知识点
3D移动之translate3d
其中,xyz都是不能省略的,没有的话就写0.
透视perspective
在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
现在我们要做一个小案例:
我现在已经做到了这一步:用整个box装两个盒子,一个是粉色的,一个是黄色的,我们给黄色的盒子一个沿X轴转60度的旋转,给body500px的透视.出来的效果是这样的:
但是当我想要这个盒子转过去的时候,出现了这样的状况:
可以看到,黄色盒子的旋转的效果突然变回二维平面的.
变成了这样的效果
现在我们就给我们的父盒子box加上一个transform-style:preserve-3d,看看效果如何:
现在便有了立体的效果嘿嘿.
刚刚又做了一个案例,还是稍稍有点难的,主要是很难想:
主要的思路:
先放一个大的盒子.box,然后再在里面放两个小盒子,一个是正面.front,一个是背面.back,给两个盒子设置好大小和文字之类的属性,最后再让整个盒子旋转. 就可以得到上面的旋转图.
重点来了:
解决方法:
下面来展示一下代码:
<!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>