黑松山资源网

css3学习之2D转换功能详解
站长资源 2024/11/16 佚名
2 0
黑松山资源网 Design By www.paidiu.com

前言

CSS3提供了2D转换功能，能够对元素进行移动、缩放和转动等功能。

2D转换的属性名为transform，使用方法为transform:method(value)。

2D转换方法有translate、scale、rotate、skew、matrix，还有基于这些分支出的translateX、scaleY等。

这里，我将会介绍到以下转换方法：

  1. translate()
  2. rotate()
  3. scale()
  4. skew() 

首先，我们先插入一个简单的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css3的2D转换</title>
    <style type="text/css">
 
 
        *{
            margin:0;
            padding:0;
        }
 
        #picture{
            width：100%;
            height:500px;
            background:#ccc;
        }
 
        img{
            margin:100px 0 0 100px;
        }
 
 
    </style>
</head>
<body>
 
    <div id="picture">       
            <img src="mary.gif" alt="This is a picture" >
    </div>
     
</body>
</html>

这段代码我们可以实现在一个div里放一张图片，通过这张图片以便于向大家介绍以下方法。

1.translate（）方法：这个方法里可以有两个参数，中间用分号隔开，分别表示沿着X轴和Y轴移动的距离，这个距离是相对于该图片的移动距离，且向右为X轴的正方向，向下为Y轴的正方向。下面的代码表示将图片向右移动100px，向下也移动100。　　

img{
    margin:100px 0 0 100px;
        transform:translate(100px,100px); 
}

2.rotate()方法：这个方法里有一个参数，表示要旋转的度数，正数表示顺时针旋转，那么负数就表示逆时针旋转了。在要旋转的度数后面添加deg （即degree，度数的意思）。以下代码表示将图片顺时针旋转50°。

img{
    margin:100px 0 0 100px;
        transform:rotate(50deg);
｝

3.scale()方法：这个方法里有两个参数，没有单位。分别表示宽度和高度放大或缩小的倍数，如果大于1表示放大；如果小于一表示缩小。以下代码表示将图片的宽度和高度都放大两倍。

img{
    margin:100px 0 0 100px;
        transform:scale(2,2);
}

4.skew（）方法：有两个参数，分别表示沿着X轴和Y轴倾斜转换，单位同样是deg，表示角度。这个方法不是很容易理解。首先给出下列代码：

img{
    margin:100px 0 0 100px;
    transform:skew(20deg,0deg);
｝

表示将图片沿着x轴逆时针旋转20度。

css3学习之2D转换功能详解

这是没有使用skew（）方法的样子

css3学习之2D转换功能详解

这是使用了skew（）方法之后的样子。

为什么呢？这是因为其x轴和Y轴的方向是这样的：

css3学习之2D转换功能详解

当x轴旋转20°时会将图片进行逆时针旋转，但是请注意：这里不是真正意义上的旋转，而有拉伸倾斜的意思，旋转之后，它的宽度并没有改变，并且做一条垂线可以发现高也是没有改变的。

对于Y轴方向的旋转是一样的：

img{
    margin:100px 0 0 100px;
    transform:skew(0deg,20deg);
｝

上面的代码表示将图片沿着Y轴方向旋转了20°。

旋转之后，就是下面这样了：它是沿着顺时针方向旋转的。

css3学习之2D转换功能详解

如果，我们对x和y轴都旋转呢？

img{
    margin:100px 0 0 100px;
    transform:skew(20deg,20deg);
｝

那么最终就是综合作用的效果了，如下图所示：

css3学习之2D转换功能详解

说了这么多，大家有没有发现我们每次偏移，旋转，倾斜，放大和缩小是相对于哪个点呢？

如果你稍微细心的话，就会发现是相对于中心点。这里就要用到tansform-origin属性了。

即通过这个属性，我们可以规定这些方法通过哪一个点作为原点。

首先举几个例子。

transform-origin：0 0；表示以左上角为原点。

transform-origin：100% 0；表示以右上角为原点

transform-origin：0 100%；表示以左下角为原点

transform-origin：100% 100%；表示以右下角为原点

于是我们可以得知，这些值的设定是以左上角为基点的，向右为x轴的正方向，向下为y轴的正方向。如果不设定这个属性，那么默认值为

transform-origin:50% 50%;即以中心作为变换的基点。

最后我还要说一下浏览器兼容的问题，为了使代码能在各个浏览器运行成功，我们需要在层叠样式表中多加几行代码，比如说rotate()方法：

transform: rotate(30deg);
-ms-transform: rotate(30deg);       /* IE 9 */
-webkit-transform: rotate(30deg);   /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);  /* Firefox */

这样，我们就可以在各个主要浏览器流畅运行了！

总结

以上就是这篇文章的全部内容了，希望本文的内容对各位学习或者使用CSS3能带来一定的帮助，如果有疑问大家可以留言交流。

黑松山资源网 Design By www.paidiu.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
黑松山资源网 Design By www.paidiu.com
www.paidiu.com 黑松山资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
黑松山资源网 Design By www.paidiu.com