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

【HTML5学习笔记】31：CSS3变形效果上

2017-08-31 21:11 615 查看

本节学习通过CSS3中的变形效果，做到平移、缩放、旋转元素。

[1]transform属性

这个属性用于指定变形效果。

注：以下的参考点只是作为一个不动点来比对参考，并不是操作的基准点，基准点默认在盒子中心

*移动前

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS3变形效果[上]</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div>
我是HTML5
</div>
参考点
</html>

@charset "utf-8";
body{
margin: 100px;/*外边距*/
}

div{
text-align: center;
width: 200px;
height :200px;
background-color: green;
box-shadow: 2px 2px 2px gray;/*阴影*/
}

*沿着x轴和y轴平移

transform: translate(200px,200px);

*水平缩放1.6倍，垂直缩放0.7倍

transform: scale(1.6,0.7);

*旋转-45度(默认以中心为基准点)

transform: rotate(-45deg);

*水平倾斜45度，垂直倾斜20度

transform: skew(45deg,20deg);

*通过6个数值指定矩形

较复杂，可参见：理解CSS3的transform中的matrix

*以上属性可以叠加使用

transform: rotate(-45deg) scale(1.3,0.7);

[2]transform-origin属性

这个属性用于指定变换的基准点，这个位置默认是在矩形的中心，也是分别执行x方向和y方向上的位置。

*指定以中心点为基准点

transform-origin: 50% 50%;
/*或*/
transform-origin: center center;

*指定以左上角为基准点

transform-origin: 0% 0%;
/*或*/
transform-origin: left top;

*以右上角为基准点旋转-45度

transform-origin: right top;
transform: rotate(-45deg);

[3]浏览器兼容性前缀问题

到目前为止，多数版本的浏览器需要在使用这两个属性时加上自己的前缀。

目前应这样做以尽量保证兼容性。

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

标签：

相关文章推荐

新的分享

章节导航

【HTML5学习笔记】31：CSS3变形效果 上

【HTML5学习笔记】31：CSS3变形效果上