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

来源：互联网发布：sql参考手册编辑：程序博客网时间：2024/05/16 11:18

本节学习通过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]浏览器兼容性前缀问题
到目前为止，多数版本的浏览器需要在使用这两个属性时加上自己的前缀。
这里写图片描述
目前应这样做以尽量保证兼容性。

阅读全文

0 0

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

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