rotateX()
就是沿着 x 立体旋转.
沿X轴旋转
image.png
沿Z轴旋转：
image.png
透视（perspective）
perspective：表示物体到屏幕的距离
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective有两种写法
- 作为一个属性，设置给父元素，作用于所有3D转换的子元素
- 作为transform属性的一个值，做用于元素自身
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 600px; /*视距，眼睛到屏幕的距离*/
}
img {
margin: 100px;
transition: all 2s;
}
img:hover {
transform: rotateY(80deg);
}
</style>
</head>
<body>
<img src="images/x.jpg" alt="">
</body>
</html>
image.png
近大远小的效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 600px;/*眼睛到屏幕的距离*/
}
div {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 100px auto;
transition: all 1s;
}
div:hover {
/*transform: translateX(100px); 沿x轴移动*/
/*transform: translateY(100px);*/
transform: translateZ(100px);/*这里如果要设置z轴的移动效果的话，就必须要给父盒子（在这里div的父盒子是body）设置perspective: 600px;属性和值，否则看不到效果，600px是指眼睛到屏幕600px距离，而这里的100px是指物体朝你的眼睛方向移动了100px*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这个灰色图块本身没这么大，加了
perspective: 600px;眼睛到屏幕的距离
transform: translateZ(100px);物体向眼睛移动的距离，这里表示物体从他原来的位置向眼睛方向移动了100px的距离，如果是移动了600px，那么满屏幕都是这个色块了，而如果移动了601以上像素，反而就看不到了，因为到脑袋后面去了
之后，鼠标经过他就会变大，原理不是图片变大，而是视距的变化，是透视本身的远小近大
image.png
案例：仿小米官网
鼠标经过后，文字上升
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 600px;
}
div {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 100px auto;
transition: all 1s;
}
div:hover {
/*transform: translateX(100px); 沿x轴移动*/
/*transform: translateY(100px);*/
/* transform: translateZ(601px);这里如果要设置z轴的移动效果的话，就必须要给父盒子（在这里div的父盒子是body）设置perspective: 600px;属性和值，否则看不到效果，600px是指眼睛到屏幕600px距离，而translateZ(100px)*/
/*transform: translate3d(x, y, z);x 和 y 可以是px 可以是%，z 必须是px，没有值的项必须写0*/
transform: translate3d(100px, 0, 0);
}
h2 {/*仿小米官网鼠标经过后文字上升*/
transform: translate3d(0, 50px, 0);
transition: all 0.8s;
}
h2:hover {
transform: translate3d(0, 0, 0);
}
</style>
</head>
<body>
<div></div>
<h2>每一毫米的突破</h2>
</body>
</html>
image.png
案例： 对开大门
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
section {
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
background: url(images/3.jpg) no-repeat;
position: relative;
perspective: 1000px;/*给父盒子添加透视，子盒子就有效果了*/
}
.door-l,
.door-r {
position: absolute;
top: 0;/*因为门是左右开的，所以不能给left，否则只会执行左边，但是也不能同时给左右，那样就不起效果*/
width: 50%;
height: 100%;
background-color: red;
transition: all 1s;/* 两个们都要翻转，所以在公共部分写过渡，谁做动画谁过渡*/
}
.door-l {
left: 0;
border-right: 1px solid #000;
transform-origin: left;/*左侧盒子朝左边翻转*/
}
.door-r {
right: 0;
border-left: 1px solid #000;
transform-origin: right;/*右侧盒子朝右边翻转*/
}
.door-l::before,
.door-r::before { /* 伪元素，作用就是插入一个元素标签 插入门上的圆环*/
content: "";
position: absolute;
/*right: 5px; 让圆环靠右边显示 让圆环和门缝有5px的距离，看起来更好看一些 连写 这个单独的属性单独写，一样的属性都写在这里*/
top: 50%; /*让圆环在中间显示*/
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%; /* 圆环 */
transform: translateY(-50%);/*让圆环往回走自己高度的一半，在正中间显示*/
}
.door-l::before {
right: 5px;
}
.door-r::before {
left: 5px;
}
/*鼠标经过section盒子，两个门盒子翻转 rotateY（）*/
section:hover .door-l {
transform: rotateY(-130deg);/*向左翻转是负值*/
}
section:hover .door-r {
transform: rotateY(130deg);/*向左翻转是负值*/
}
</style>
</head>
<body>
<section>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
</body>
</html>
image.png
案例：
两面翻转的盒子
backface-visibility: hidden(隐藏); 不是正面对向我们就隐藏
backface-visibility: visible(可见);不是正面对向我们继续显示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;/*更改图片的层级，因为定位是后面的压住前面的，所以第二张图片压住了第一张，所以要给他提升一层显示*/
backface-visibility: hidden;/*不是正面对向我们的话就隐藏，这是做这个两面翻转图片效果的关键属性*/
}
div:hover img {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="images/qian.svg" alt="">
<img src="images/hou.svg" alt="">
</div>
</body>
</html>
image.png
鼠标经过后翻转另一面显示：
image.png
网友评论