您的位置：首页 > Web前端 > CSS

css3 变形记

2015-07-09 21:29 666 查看

css3 变形

　　transform属性语法：

transform：none | <transform-function> [<transform-function>]*

　　可用于内联和块元素。默认值为none，表示元素不变形。另一个属性是变形函数，可以有多个。

　　常用的2D变形函数：

　　translate():移动元素，可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数translateX()和translateY()。

　　scale():缩小或放大元素，可以使元素尺寸发生变化。在此基础上有两个扩展函数scaleX()和scaleY():。

　　rotate():旋转元素。

　　skew():让元素倾斜。在此基础上有两个扩展元素skewX()和skewY()。

　　matrix():定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

　　常用的3D变形函数：

　　translate3d():移动元素，用来指定一个3D变形移动位移量。

　　translateZ():指定3D位移在Z轴的位移量。

　　scale3d():缩放一个元素。

　　scaleZ():指定Z轴的缩放向量。

　　rotate3d():指定元素具有一个三维旋转的角度。

　　rotateX(),rotateY(),rotateZ():让元素具有一个旋转角度。

　　perspective():指定一个透视投影矩阵。

　　matrix3d():定义矩阵变形。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}

#div{
box-sizing:border-box;
margin:0 auto;
width:200px;
height:100px;
border:solid;
position:relative;
}
#div div{
width: 50px;
height: 50px;
background: #ffd800;
/*X轴偏移100px*/
transform: translate(100px);
}
</style>
</head>
<body>
<div id="div">
<div></div>
</div>
</body>
</html>

#div div{
width: 50px;
height: 50px;
background: #ffd800;
/*按比例放大1.5倍*/
transform:scale(1.5);
}

#div div{
width: 50px;
height: 50px;
background: #ffd800;
/*顺时针旋转45度*/
transform:rotate(45deg);
}

#div div{
width: 50px;
height: 50px;
background: #ffd800;
/*x轴倾斜30度*/
transform:skew(30deg);
}

　　transform-origin属性：用来指定元素的中心位置，默认变形的原点在元素的中心点。2D变形中可接受X轴与Y轴的位置，3D变形还包括Z轴三个值。可用关键词，长度值与百分比，不能影响transform-translate变形。

#div div{
width: 50px;
height: 50px;
background: #ffd800;
/*修改变形起点为左上角*/
transform-origin:left top;
transform:rotate(30deg);
}

　　transform-style属性：指定嵌套元素如何在3D空间中呈现。主要有两个值，flat(默认，表示所有子元素在2D平面呈现)，preserve-3d(所有子元素在3D平面呈现)。

　　perspective属性：该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D平面上，简单理解为，用来设置用户和元素3D空间Z轴平面之间的距离。其效应由他的值决定，值越小，用户与3D空间Z平面距离越近，否则，越远。如果不指定透视，则Z轴空间中的所有点将平铺在同一个2D平面中。

　　perspective-origin属性：用来决定perspective属性的源点角度。

　　backface-visibility属性：决定元素旋转背面是否可见。有二个值，visible(默认，可见)，hidden(隐藏)。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航