3 D转换
一. 三维坐标系:
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
- x轴:水平向右 注意: x 右边是正值,左边是负值
- y轴:垂直向下 注意: y 下面是正值,上面是负值
- z轴:垂直屏幕 注意: 往外面是正值,往里面是负值 (外正里负)
二. 3 D位移:
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。
- translform:translateX(100px):仅仅是在x轴上移动
- translform:translateY(100px):仅仅是在Y轴上移动
- translform:translateZ(100px):仅仅是在Z轴上移动**(注意:translateZ一般用px单位)**
- transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 不可以这样写,上面一个transform会被下面的transform给替换掉
transform: translateX(100px);
transform: translateY(100px);
*/
transform: translateX(100px) translateY(100px) translateZ(100px);
/* 我们可以看到没有任何的效果是因为translateZ是要借助于透视
translateZ(100px)向外移动100px
*/
}
</style>
</head>
<body>
<div></div>
</body>
3D位移简写的方法:
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate3d(100px,100px,100px);
}
</style>
三. 透视perspective(观察屏幕的距离,写在父盒子上的):
在2D平面产生近大远小视觉立体,但是只是效果二维的
四. 3D旋转:
3D旋转指可以让元素在三维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转
- transform:rotateX(45deg):沿着x轴正方向旋转 45度
- transform:rotateY(45deg) :沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) :沿着Z轴正方向旋转 45deg (
和2D旋转transform:rotate()效果一样,加不加透视效果都相同,因为Z轴是眼睛与屏幕相垂直的
)
transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)xyz是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度:
- transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg
- transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg
transform: rotate3D(1,1,0,45deg); /*沿着x,y轴的对角线旋转45deg*/
五. 3D呈现transfrom-style (重点):
- 控制子元素是否开启三维立体环境
transform-style: flat 子元素不开启3d立体空间 默认的
- transform-style: preserve-3d; 子元素开启立体空间
- 代码写给父级,但是影响的是子盒子(让孩子保留立体空间)
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 3s;
transform-style: preserve-3d; /*让子元素保持3D立体的空间环境*/
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
-------------------------------------------------------------------
<body>
<div class="box">
<div></div>
<div></div>
</div>
效果图:
1. 案例:两面翻转的盒子:
原理:一个父盒子装两个子盒子背靠背,当父盒子旋转时就可以显示后面的那个子盒子
注意因为浏览器版本的原因要添加属性
backface-visibility: hidden; /* 隐藏被旋转的div元素的背面 */
<!DOCTYPE html>
<html lang="zh-CN">
<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>两面翻转的盒子</title>
<style>
body {
perspective: 250px; /*让子元素保持3D立体的空间环境*/
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all .4s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.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;
z-index: 1;
/*z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。
当元素之间重叠的时候,z-index 较大的元素会覆盖较小的元素在上层进行显示。*/
backface-visibility: hidden;
/* 隐藏被旋转的div元素的背面 */
}
.back {
background-color: brown;
/*两个盒子背靠背旋转*/
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">001</div>
<!-- 前面的盒子 -->
<div class="back">002</div>
<!-- 后面的盒子 -->
</div>
</body>
</html>
2. 旋转木马案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 150px auto;
transform-style: preserve-3d;
/* 添加动画效果 */
animation: rotate 10s linear infinite;
background: url(media/pig.jpg) no-repeat;
}
section:hover {
/* 鼠标放入section 停止动画 */
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(media/dog.jpg) no-repeat;
}
section div:nth-child(1) {
transform: rotateY(0) translateZ(300px);
}
section div:nth-child(2) {
/* 先旋转好了再 移动距离 */
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
/* 先旋转好了再 移动距离 */
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
/* 先旋转好了再 移动距离 */
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
/* 先旋转好了再 移动距离 */
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
/* 先旋转好了再 移动距离 */
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
child(6) {
/* 先旋转好了再 移动距离 */
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>