目录
前言
CSS-transform【上】(2D转换)【看这一篇就够了！！！】-CSDN博客
3D转换
下图是一个3D转换坐标图，看明白这张图对于学习3D转换是很有必要的：
- 元素的左上角坐标为(0，0，0)
- x轴右边为正方向
- y轴下方为正方向
- z轴垂直电脑屏幕
perspective透视
- 没有透视定义，就没有3D
- 透视是指在平面上秒回物体的空间关系的方法
- 要在平面上描绘物体的空间立体感，需要遵循透视原理中的“近大远小”原则
- 当一个物体离我们越近，我们看到他会比离我们远的时候大
- 可以理解为我们站在多远的地方来看这个物体，当我们站的越远，我们看到的物体就会越小，离得越近看到的就越大
- CSS3中3D transform的“视点”是在浏览器的前方
- 在CSS3中，用perspective属性来设置透视距，即模拟人站在离屏幕多远的地方来看电脑上显示的元素
- 如果元素往Z轴正方向移动，离我们越近，看到的物体就越大
- 如果元素往Z轴负方向移动，离我们越远，看到的物体就越小
- perspective这个属性要设置在父元素上面
translate 3D 位移
- translateX(x) 表示水平方向（x 轴）的位移量，与 2D 位移是一样的效果
- translateY(y) 表示垂直方向（y 轴）的位移量，与 2D 位移是一样的效果
- translateZ(z) 表示垂直于电脑屏幕方向（z 轴）的位移量
- translate3d(x,y,z) 表示元素在 x,y,z 三个坐标上的位移量，用来称动元素在 3D 空间中的位置
translateZ(x)
我们要能看到3D效果，必须要配合perspective属性，perspective属性用来定义透视强度
/* 视距为300px 相当于模拟人站在离电脑屏幕300px的位置看这个元素 */ perspective: 300px;当perspective的值为300px，则300px就会成为的那个下显示效果的基准：
- translateZ = 0：图形大小正常显示
- 0 < translateZ < 300：图形越来越大
- translateZ >= 300：图片不见，相当于图片在你的后面，你肯定是看不见的了
- translateZ < 0：图形变小
<style>
.box {
width: 150px;
height: 150px;
border: 2px solid red;
float: left;
margin: 100px 30px;
/* 设置视距为300px */
perspective: 300px;
/* 设置视距为900px */
/* perspective:900px; */
}
.item {
width: 100%;
height: 100%;
background-color: rgb(240, 230, 140, 0.7);
}
.item1 {
transform: translateZ(100px);
}
.item2 {
transform: translateZ(-100px);
}
.item3 {
transform: translateZ(0px);
}
</style>
<body>
<div class="box">
<div class="item item1">translateZ(100px)</div>
</div>
<div class="box">
<div class="item item2">translateZ(-100px)</div>
</div>
<div class="box">
<div class="item item3">translateZ(0px)</div>
</div>
</body>
translate3d
- 表示元素在 x,y,z 三个坐标上的位移量，用来称动元素在 3D 空间中的位置
- z 的值不能使用百分比，如果使用会被认为是无效属性
<style>
.box {
width: 150px;
height: 150px;
border: 2px solid red;
float: left;
margin: 100px 30px;
/* 视距 */
perspective: 300px;
}
.item {
width: 100%;
height: 100%;
background-color: rgb(240, 230, 140, 0.7);
}
.item1 {
/*
x轴正方向移动20px
y轴正方向移动30px
z轴正方向移动50px
*/
transform: translate3d(20px, 30px, 50px);
}
.item2 {
transform: translate3d(20px, 30px, -50px);
}
.item3 {
transform: translate3d(-20px, -30px, -50px);
}
</style>
<body>
<div class="box">
<div class="item item1">translate3d(20px, 30px, 50px)</div>
</div>
<div class="box">
<div class="item item2">translate3d(20px, 30px, -50px)</div>
</div>
<div class="box">
<div class="item item3">translate3d(-20px, -30px, -50px)</div>
</div>
</body>效果
rotate 3D 旋转
css中通过给transform添加一下变换函数值来实现3D旋转效果
属性值 描述 rotateX(ax) 表示元素绕 X轴旋转一定的角度
ax 表示度数，可以为正，也可以为负rotateY(ay) 表示元素绕 Y轴旋转一定的角度
ay 表示度数，可以为正，也可以为负rotateZ(az) 表示元素绕 Z轴旋转一定的角度
ax 表示度数，可以为正，也可以为负
3D旋转方向
左手法则
我们并不需要用死记的方式来记住不同轴上的正角和负角的旋转方向，我们可以通过左手法则来记忆
| x轴 | y轴 | z轴 |
|---|---|---|
| 大拇指方向指向x的正方向，剩下四个手指的方向为x轴旋转的正方向，反过来就是负方向 | 大拇指方向指向y的正方向，剩下四个手指的方向为y轴的的正方向，反过来就是负方向 | 大拇指方向指向z的正方向，剩下四个手指的方向为z轴旋转的正方向，反过来就是负方向 |
 |  |
rotateX、rotateY、rotateZ
<style>
.box {
width: 150px;
height: 150px;
border: 2px solid red;
float: left;
margin: 50px 20px;
/* 设置3D的透视距，你可以理解为站在多远的地方来看这个物体 */
perspective: 600px;
}
.item {
width: 150px;
height: 150px;
background-color: skyblue;
font-size: 20px;
}
.item1 {
transform: rotateX(40deg);
}
.item2 {
transform: rotateX(-40deg);
}
.item3 {
transform: rotateY(40deg);
}
.item4 {
transform: rotateY(-40deg);
}
.item5 {
transform: rotateZ(40deg);
}
.item6 {
transform: rotateZ(-40deg);
}
</style>
<body>
<div class="box">
<div class="item item1">rotateX(40deg)</div>
</div>
<div class="box">
<div class="item item2">rotateX(-40deg)</div>
</div>
<div class="box">
<div class="item item3">rotateY(40deg)</div>
</div>
<div class="box">
<div class="item item4">rotateY(-40deg)</div>
</div>
<div class="box">
<div class="item item5">rotateZ(40deg)</div>
</div>
<div class="box">
<div class="item item6">rotateZ(-40deg)</div>
</div>
</body>效果
transform-style
设置元素的子元素是位于3D空间中还是平面中
值 描述 flat 表示所有子元素在 2D 平面呈现。 preserve-3d 表示所有子元素在 3D 空间中呈现。
<style>
.box {
width: 200px;
height: 200px;
border: 2px solid red;
margin: 20px 150px;
position: relative;
/* 视距 */
perspective: 300px;
/* 设置元素的子元素是位于 3D 空间中 */
transform-style: preserve-3d;
}
.item {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
.item1 {
background-color: khaki;
/* x轴正方向顺转60deg */
transform: rotateX(60deg);
}
.item2 {
background-color: skyblue;
/* y轴正方向顺转 60deg */
transform: rotateY(60deg);
}
</style>
<body>
<div class="box">
<div class="item item1"></div>
<div class="item item2"></div>
</div>
</body>效果
2D 与 3D 简单总结
变换函数
- 位移变换函数：translate(x,y)、 translateX(x) 、 translateY(y) 、 translateZ(y)
- x,y 的值为单位长度，可以是 px、百分比
- z 的值只能为 px 长度单位。
- translate(x) 同等于 translate(x,0);
- 缩放变换函数：scale(x,y) 、scaleX(x)、 scaleY()
- x,y 的值为数字，分别表示宽度和长度的缩放比例
- scale(x) 表示 y 的值和 x 一样大，实现等比缩放
- 斜切变换函数：skew(ax,ay)、 skewX(ax)、 skewY(ax)
- ax、ay 分表示水平和垂直拉升，使元素与 x 轴和 y 轴发生的扭曲角度
- 旋转变换函数：rotate(ax) 、rotateX() 、 rotateY()、 rotateZ()
- rotate 表示 2D 平面旋转，ax 表示旋转度数，为正，表示顺时针旋转，为负，表示逆时针旋转
- rotateX( ax) 、rotateY(ay )、rotateZ(az )表示 3D 旋转,旋转的方向，可以通过左手法则来记忆。
重要属性
perspective 视距
- 用来模拟人站在离电脑屏幕多远的距离来看这个元素。
- 假设 div 的 width:300px;height:300px;perspective:900px;则表示人站在离屏幕 900px 的位置看现在的 div。看到 div 的大小就是我们设置的 width:300px;和 height:300px;的大小
- 当 div 的 translateZ=0 时，看到的元素大小就是 width:300px 和 height:300px
- 当 div 的 0<translateZ<300px 时，看到的元素要比实际大
- 当 div 的 translateZ<0 时，看到的元素要比实际的小
- 当 div 的 translateZ>300px 时，则看不到元素，因为元素在我们的后面。
transform-style 子元素是否在 3D 空间下呈现
值 描述 flat 表示所有子元素在 2D 平面呈现。 preserve-3d 表示所有子元素在 3D 空间中呈现。 transform-origin:x y z; 设置变换的原点
- 默认值为 transform-origin:50% 50% 0;
- x y 的值可以是长度单位 px 和百分比% 或预设的关键字
应用案例
3D导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
position: fixed;
top:0;
left: 0;
width: 100%;
height: 50px;
background-color: pink;
}
.container .navigation {
width: 500px;
height: 50px;
margin: 0 auto;
}
.container ul li {
width: 100px;
height: 50px;
float: left;
perspective: 300px;
}
.container ul li .box {
width: 100px;
height: 50px;
transition: all 1s;
transform-style: preserve-3d;
}
.box a {
display:block;
padding: 0 10px;
height: 50px;
text-decoration: none;
color: #fff;
line-height: 50px;
text-align: center;
}
a.font {
background-color: pink;
}
a.back {
background-color: khaki;
transform-origin: top;
transform: rotateX(-90deg);
}
.container ul li:hover .box{
transform-origin: 50% 50% -25px;
transform: rotateX(90deg);
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
<ul>
<li>
<div class="box">
<a href="#" class="font">前端架构</a>
<a href="#" class="back">前端架构</a>
</div>
</li>
<li>
<div class="box">
<a href="#" class="font">前端开发</a>
<a href="#" class="back">前端开发</a>
</div>
</li>
<li>
<div class="box">
<a href="#" class="font">后端开发</a>
<a href="#" class="back">后端开发</a>
</div>
</li>
<li>
<div class="box">
<a href="#" class="font">全栈开发</a>
<a href="#" class="back">开发</a>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>效果
扫一扫
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
