2D及3D转换
转换 —— transform
目录
2D转换
-
移动 —— translate
1.语法：
transform：translate(x,y);
或分开写：
transform：translateX（n）;
transform：translateY（n）;
2.重点：
- 可以沿X或Y轴移动； 注意：X/Y轴起点为左上角
- 其的移动不影响其它元素；
- .translate的百分比单位相对于自身元素的大小，translate：(50%，50%）自身的一半；
- 对行内标签无效果。
-
旋转 —— rotate
1.语法：
transform：rotate（度数deg）；
2.重点：
- 度数为正时，为顺时针转；度数为负时，为逆时针转;
- 默认旋转中心为元素中心点。
-
缩放 —— scale
1.语法：
transform：scale(x,y);
x,y同时缩放：
transform：scale(n) ;
2.重点：
- x代表宽度缩放；y代表高度缩放。
- x,y没有单位，值为原来的倍数。
- 默认缩放中心为元素中心点。
- 不影响其他元素。
-
2D转换综合写法
1.同时使用多个转换，格式：
transform: translate() rotate() scale() ;
2.顺序影响转换效果，举例：
先旋转会改变坐标轴方向
3.同时有多个属性，位移放在最前面。
-
设置转换中心点
- transform-origin: x y;
- 默认：（50% 50%）== (center center) ；
- x,y可设置 像素 ( 上距 左距 ) 或 方位名词 （top bottom left ) ;
3D转换
由三维坐标系组成，x轴向右为正，y轴向下为正，z轴向外为正
-
3D移动 —— translate3d
1.语法：
transform:translateX(100px); 仅在x轴上移动
transform:translateY(100px); 仅在y轴上移动
transform:translateZ(100px); 仅在z轴上移动
统一表示：transform: translate3d(x,y,z);
2.注意：
（1）在z轴上单位一般用px ；
（2）x，y，z轴没有时不可省略其位置，要写成 0 px ;
-
2D转换 —— rotate3d
1.语法：
transform:rotateX(45deg); 沿x轴正方向旋转45度
transform:rotateY(45deg); 沿y轴正方向旋转45度
transform:rotateZ(45deg); 沿z轴正方向旋转45度--形同与2d旋转
统一表示：transform:rotate3d(x,y,z,deg) ;
2.判断旋转方向方法：
左手螺旋准则：角度为正，大拇指为轴正向，四指指向为旋转方向。
3.注意：
（1）x，y，z轴统一书写时，其内容不可省略，有的写1，没有的写0；
（2）沿各轴旋转时，其他轴方向可能会改变。
-
透视 —— perspective
- 效果：在2d平面生成近大远小的视觉立体。
- 语法：perspective：500px;
- 理解：透视表示为视距，指人眼到物体的距离，当距离越小，物体的像越大。
- 注意：
（1）透视要写在被观察元素的父辈元素的盒子上；
（2）其距离是表示在z轴上的；
（3）视距大小及父元素内子元素排布影响物体角度。
-
3D呈现 —— transform-style
1.意义：在父元素开启三维的情况下，控制子元素是否开启三维空间；
2.取值：
transform-style：flat ——不开启三维空间；（默认）
transform-style：preserve-3d ——开启三维空间；
3.注意：代码要写给父级元素，但影响的为子级元素。
练习
-
使盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>使盒子垂直居中</title>
</head>
<style>
.container{
width: 400px;
height: 300px;
background-color: cadetblue;
position: relative;
}
.main{
width: 150px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
</style>
<body>
<div class="container">
<div class="main"></div>
</div>
</body>
</html>-
旋转出内容框
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid cornflowerblue;
margin: 50px 50px;
overflow: hidden;
float: left;
}
.box::after{
content: "我是图图小淘气，面对世界很好奇";
display: block;
font-family: 翩翩体-简;
width: 100px;
height: 100px;
padding: 8px 0 0 13px;
background-color: rgba(95, 158, 160, 0.699);
border: 1px solid rgba(58, 30, 216, 0.555);
box-sizing: border-box;
border-radius: 50% 0 0 0;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all .2s;
}
.box:hover::after{
transform: rotate(0deg);
}
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>-
盒子的两面
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<style>
body{
perspective: 600px;
}
.box{
height: 200px;
width: 300px;
margin: 200px auto;
background-color: darkgray;
position: relative;
transform-style: preserve-3d;
transition:all .5s;
}
.box:hover{
transform: rotateX(90deg);
}
.main,.back{
height: 200px;
width: 300px;
position:absolute;
right: 0;
top: 0;
text-align: center;
line-height: 200px;
font-size: 30px;
font-style: italic;
}
.main{
background-color: darkkhaki;
transform: translateZ(100px);
}
.back{
background-color: darkorange;
transform:translateY(100px) rotateX(-90deg);
}
</style>
<body>
<div class="box">
<div class="main">Time and tide</div>
<div class="back">Waits for no man!</div>
</div>
</body>
</html>就到这里啦！