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

最新推荐文章于 2024-04-19 05:22:34 发布

大桔骑士v

最新推荐文章于 2024-04-19 05:22:34 发布

阅读量853

点赞数

分类专栏： CSS 文章标签：平移缩放旋转 CSS3 transform

本文链接：https://blog.csdn.net/SHU15121856/article/details/77753380

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

大桔骑士v

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

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