# 3D转换
# rotateX()
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
# rotateY()
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
<div style="
width:200px;
height:200px;
background:#00EEEE;
color:#FFF;
border-radius:5px;
text-align:center;
line-height:200px;
margin:10px auto;
transform:rotate(45deg);
opacity:0.5"
>
2Drotate(45deg)
</div>
<div style="
width:200px;
height:200px;
background:#00EEEE;
color:#FFF;
border-radius:5px;
text-align:center;
line-height:200px;
margin:10px auto;
opacity:0.5;
transform:rotateX(45deg)"
>
3DrotateX(45deg)
</div>
<div style="
width:200px;
height:200px;
background:#00EEEE;
color:#FFF;
border-radius:5px;
text-align:center;
line-height:200px;
margin:10px auto;
opacity:0.5;
transform:rotateY(45deg)"
>
3DrotateY(45deg)
</div>
2Drotate(45deg)
3D2DrotateX(45deg)
3D2DrotateY(45deg)
transform: none|transform-functions;
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x[,y]?) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
# perspective(n)
n 元素距离视图的距离，以像素计。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(50deg);
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>
HELLO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div3
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
}
#div4
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(50deg);
}
</style>
</head>
<body>
<div id="div3">
<div id="div4">HELLO</div>
</div>
</body>
</html>
HELLO
# transform-style
transform-style 属性指定嵌套元素是怎样在三维空间中呈现。
transform-style: flat|preserve-3d;
/*flat 表示所有子元素在2D平面呈现。默认*/
/*preserve-3d 表示所有子元素在3D空间中呈现。*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div5
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div6
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg);
-webkit-transform-style: preserve-3d;
}
#div7
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(-60deg);
-webkit-transform: rotateY(-60deg);
}
</style>
</head>
<body>
<div id="div5">
<div id="div6">HELLO
<div id="div7">YELLOW</div>
</div>
</div>
</body>
</html>
HELLO
YELLOW
# perspective-origin
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。 定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。
perspective-origin: x-axis y-axis;
# backface-visibility
backface-visibility:hidden当处于背面时隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.div8{
width:100px;
height:100px;
background: #00AFEF;
transform:rotateY(180deg);
/* backface-visibility: hidden; */
}
</style>
</head>
<body>
<div class="div8">1112</div>
</body>
</html>
11312
← 2D转化 过渡transition →