一.css3新特性
1. 3D转换
（1）三维坐标系
- x轴：水平向右 x右边是正值，左边是负值
- y轴：垂直向下 y下面是正值，上面是负值
- z轴：垂直屏幕 往外面是正值，里面是负值
（2）3D移动translate3d
- transform：translateX（100px）：仅仅在x轴上移动
- transform：translateY（100px）：仅仅在y轴上移动
- transform：translateZ（100px）：仅仅在z轴上移动
- transform：translate3d（x，y，z）：其中，xyz分别指需要移动的轴的方向和距离
x y z不能省略，如果没有就写0
（3）透视perspective
- 模拟人的位置，可认为安排了一只眼睛去看
- 透视也称视距，就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素
透视写到被观察元素的父盒子身上
近大远小（眼睛）
d:就是视距，视距就是一个人的眼睛到屏幕的距离
z：就是z轴，物体距离平面的距离，z轴越大（正值）看到的物体越大（物体）
<style>
body {
perspective: 400px;
}
div {
width: 100px;
height: 100px;
background-color: pink;
transform: translate3d(200px, 100px, 100px);
}
</style>
</head>
<body>
<div></div>
</body>
（4）translateZ
是在被放大的盒子上，是物体到屏幕到距离
（5）3D旋转rotateX
语法：
- transform：rotateX（45deg）：沿着x轴正方向旋转了45度
- transform：rotateY（45deg）：沿着y轴正方向旋转了45度
- transform：rotateZ（45deg）：沿着z轴正方向旋转了45度
- transform：rotate3d（x，y，z，deg）：沿着自定义轴旋转了deg为角度
<style>
body {
perspective: 100px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateX(45deg);
/* 正45度是相后倒，负45度向前倾 */
}
</style>
</head>
<body>
<img src="../12.jpg" alt="">
</body>
左手准则：
- 左手的手拇指指向x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴正方向旋转的方向
（6）rotateY
左手准则：
- 左手的手拇指指向y轴的正方向
- 其余手指的弯曲方向就是该元素沿着y轴正方向旋转的方向
5590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
