CSS过渡中的变形效果中的平移translate，旋转，rotate，倾斜，skew怎么搞啊？

html-css012

CSS过渡中的变形效果中的平移translate，旋转，rotate，倾斜，skew怎么搞啊？,第1张

"推荐你个系列的教程吧--《Buid New World》第十一集：使用 CSS 增加过渡和其他效果 平移translate，将元素平行移动，参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

旋转，rotate允许你通过传一个角度值来旋转一个元素。

如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

倾斜，skew可以将一个对象围绕着x和y轴按照一定的角度倾斜，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

"

把背景和文字分成两个不同的元素即可，比如：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

div {

position:relative

}

span.bk {

display: block

width:120pxheight: 110px

background-color: chartreuse

transform:skewY(10deg)

transform:skewX(10deg)

}

span.ft {

position:absolute

left:30px top:30px

width:60pxheight:50px

line-height: 50px

align-self: center

}

</style>

</head>

<body>

<div>

<span class=bk></span>

<span class=ft>TEST</span>

</div>

</body>

</html>