左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。
rotateX()
就是沿着 x 立体旋转
img {
transition: all 0.6s;
}
img:hover {
transform: rotateX(360deg);
}
rotateY()
img:hover {
transform: rotateX(360deg);
}
rotateZ()
img:hover {
transform: rotateZ(360deg);
}
透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
perspective有两种写法
- 作为一个属性，设置给父元素，作用于所有3D转换的子元素
- 作为transform属性的一个值，做用于元素自身
透视原理：近大远小；
浏览器透视，把近大远小的所有图像透视在屏幕上。
perspectiv:视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。
注：并非任何情况下都需要透视效果，设置给父元素，作用于所用3D转换的子元素。
body {
perspective: 500px;/* 视距，越小越明显 */
}
transform: translate3d(x,y,z); x和y可以是px 可以是% z只能是px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
perspective: 600px;;
}
div {
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transition: all 1s;
}
div:hover {
transform: translate3d(100px, 100px, 300px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
例：文字上升效果
h2 {
text-align: center;
transform: translate3d(0, 100px, 0);
transition: all 2s;
}
h2:hover {
transform: translate3d(0,0,0);
}
backface-visibility
backface-visibility属性定义当元素不面向屏幕时是否可见。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
transition: all 0.6s;
}
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>
网友评论