CSS3提供的变形支持

最新推荐文章于 2023-01-29 14:50:40 发布

WYG2020

最新推荐文章于 2023-01-29 14:50:40 发布

阅读量240

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/wyg2020/article/details/104162507

版权

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>