CSS3提供的变形支持

transform该属性用于设置变形:
translate(tx[,ty]):该函数设置HTML元素沿X轴移动tx距离,沿Y轴移动ty距离。其中ty参数可以省略,如果省略ty参数,则ty默认为0,表明沿Y轴没有位移。
translate3d(tx,ty,tz):该函数设置HTML元素沿X轴移动tx距离,沿Y轴移动ty距离,沿Z轴移动tz距离。
translateX(tx):该函数设置HTML元素沿X轴移动tx距离。
translateY(ty):该函数设置HTML元素沿Y轴移动ty距离。
translateZ(tz):该函数设置HTML元素沿Z轴移动tz距离。
scale(sx,sy):该函数设置HTML元素沿X轴缩放比为sx,沿Y轴缩放比为sy。其中sy参数可以省略,如果省略sy参数,则ty默认等于sx,也就是保持从横比缩放
scale3d(sx,sy,sz):该函数设置HTML元素沿X轴缩放比为sx,沿Y轴缩放比为sy,沿Z轴缩放比为sz。
scaleX(sx):该函数相当于执行scale(sx,1)。
scaleY(sy):该函数相当于执行scale(1,sy)。
scaleZ(sz):该函数相当于执行scale(1,1,sz)。
rotate(angle):该函数设置HTML元素绕Z轴顺时针转过angle角度。
rotate3d(x,y,z,angle):该函数设置HTML元素绕制定轴(x、y、z参数代表旋转轴的方向)顺时针转过angle角度。
rotateX(angle):该函数设置HTML元素绕X轴顺时针转过angle角度。
rotateY(angle):该函数设置HTML元素绕Y轴顺时针转过angle角度。
rotateZ(angle):该函数设置HTML元素绕Z轴顺时针转过angle角度。
skew(sx[,sy]):该函数设置HTML元素沿X轴倾斜sx角度,沿Y轴倾斜sy角度。其中sy参数可以省略,如果省略sy参数,则ty默认为0。
skewX(xAngle):该函数设置HTML元素沿X轴倾斜xAngle角度
skewY(yAngle):该函数设置HTML元素沿Y轴倾斜yAngle角度。

transform-origin:该属性设置变形的中心点。
left:指定旋转中心点位于HTMl元素的左边界
top:指定旋转中心点位于HTMl元素的上边界
right:指定旋转中心点位于HTMl元素的右边界
bottom:指定旋转中心点位于HTMl元素下边界
cencer:指定旋转中心点位于HTMl元素的中间
长度值:指定旋转中心点距离左边界、右边界的长度
百分比:指定旋转中心点位于X轴、Y轴上的百分比位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div{
            display: inline-block;
            width: 60px;
            height: 60px;
            background-color: #bbb;
            border: 2px solid black;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div>文字</div> 旋转30<div style="transform: rotate(30deg);">we</div><br/>
    <div>文字</div> 旋转45<div style="transform: rotate(45deg);">as</div><br/>
    <div>文字</div> 绕X轴旋转30<div style="transform: rotateX(30deg);">as</div><br/>
    <div>文字</div> 绕Y轴旋转30<div style="transform: rotateY(30deg);">dsd</div><br/>
    <div>文字</div> 绕Z轴旋转30<div style="transform: rotateZ(30deg);">wq</div><br/>
    <div>文字</div> 绕X、Z轴旋转30<div style="transform: rotateX(30deg) rotateZ(30deg);">qw</div><br/>
    <div>文字</div> 绕Y、Z轴旋转30<div style="transform: rotateY(30deg) rotateZ(30deg);">qw</div><br/>
    <div>文字</div> 沿X轴倾斜30<div style="transform: skewX(30deg);">qw</div><br/>
    <div>文字</div> 沿Y轴倾斜30<div style="transform: skewY(30deg);">qw</div><br/>
</body>
</html>

显示:
CSS3提供的变形支持_第1张图片

你可能感兴趣的:(html5)