css3 — 3D变形

transform为3D 变形增加了3个函数

rotateX：  元素沿x轴旋转

rotateY：  元素沿Y轴旋转

rotateZ：  元素沿Z轴旋转

 

transfor-style：flat | preserve-3d         用于设置箱套的子元素在3d空间显示的效果

perspective: number   |  none;   定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

 

<!DOCTYPE html>
<html>
<head>
<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: yellow;
transform: rotateX(30deg);

}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>

 

posted on 2020-10-31 21:06  博言泽  阅读(157)  评论(0)    收藏  举报

导航