css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin

最新推荐文章于 2024-07-10 10:04:49 发布

叨唠

最新推荐文章于 2024-07-10 10:04:49 发布

阅读量1.7w

点赞数 15

分类专栏：前端web CSS3 文章标签： web前端 css3 transform

本文链接：https://blog.csdn.net/zyz00000000/article/details/82890644

版权

前端web 同时被 2 个专栏收录

66 篇文章 1 订阅

订阅专栏

CSS3

13 篇文章 1 订阅

订阅专栏

注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的

1. CSS3 转换：transform属性可以对元素进行移动、缩放、转动、拉长或拉伸

注意： Internet Explorer 9 要求前缀 -ms- 版本，Internet Explorer 10, Firefox, 和 Opera支持transform 属性，Chrome 和 Safari 要求前缀 -webkit- 版本。

2. 旋转：transform: rotate();——必须是块元素

（1）以x、y、z轴进行旋转，默认是z轴；

（2）rotateX（）、rotateY（）、rotateZ（）

（3）（）内的值单位是：deg角度

比如：transform: rotate(45deg);

（4）还有一种复合写法：rotate3d（x,y,z,angle）

空间直角坐标系（x,y,z）和原点确定一个轴，然后在该轴上旋转angle的角度

比如：transform: rotate3d(1,1,1,45deg);

注意：

第一种方法：再执行rotateX（）后的图形，再执行rotateY（）

第二种方法：直接在确定的轴上进行角度旋转

两种方法得到的结果是不一样的

3. 缩放：transform：scale（）

值的绝对值>1，就是放大，比如2，就是放大2倍

值的绝对值 0<值<1，就是缩小，比如0.5，就是原来的0.5倍；

值的正负，负值表示图形翻转。

默认情况下，scale（x, y）：以x/y轴进行缩放；如果y没有值，默认y==x；

也可以分开写：scaleX() scaleY() scaleZ()，分开写的时候，可以对Z轴进行缩放

第二种写法：transform：scale3d（x, y, z）该写法是上面的方法的复合写法，结果和上面的一样。

比如：transform: scaleX(1.8);

4. 倾斜拉伸：skew（x，y），单位：角度deg

如果只有一个参数，y == 0

分开写：skewX（）和skewY()

正值：将图中的线拉伸

比如：transform: skewX(30deg);

比如：transform: skewY(30deg);

5. transform：translate（）平移

transform：translate（20px）：一个值的时候，表示水平方向的平移20px，垂直方向0px；两个值的时候，水平方向和垂直方向分别平移。

transform：translateX()、transform：translateY()、transform：translateZ()，注意Z轴的平移是面向屏幕的

transform：translate3d(x, y, z)：三个值分别对应三个方向

比如：transform: translate3d(50px, 30px, 20px);

6. transform-origin：改变图形的中心点

当图形的中心点改变后，图片的旋转会受到影响；

中心的默认值：50% 50%，即图形x轴、y轴的50%的位置，这里的百分比是以图形原来盒子长度决定的。包括border、padding、content区

比如：

     .demo1{
            width: 100px;
            height: 100px;
            padding: 20px 0px;
            border: 10px solid black;
            position:absolute;
            top: 100px;
            left: 100px;
            background: green;
            transform-origin: 0% 0%;
            transform: rotate(30deg);
        }

关键词	百分比
top = top center = center top	50% 0%
right = right center = center right	100% 50%
bottom = bottom center = center bottom	50% 100%
left = left center = center left	0% 50%
center = center center	50% 50%
top left = left top	0% 0%
top right = right top	100% 0%
bottom right = right bottom	100% 100%
bottom left = left bottom	0% 100%

7. transform-style：preserve-3d；保留3d效果

比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            position: relative;
            height: 200px;
            width: 200px;
            margin: 100px;
            padding: 10px;
            border: 1px solid black;
        }

        #div2 {
            padding: 50px;
            position: absolute;
            border: 1px solid black;
            background-color: red;
            transform: rotateY(60deg);
            transform-style: preserve-3d;
            -webkit-transform: rotateY(60deg); /* Safari and Chrome */
            -webkit-transform-style: preserve-3d; /* Safari and Chrome */
        }

        #div3 {
            padding: 40px;
            position: absolute;
            border: 1px solid black;
            background-color: yellow;
            transform: rotateY(-60deg);
            -webkit-transform: rotateY(-60deg); /* Safari and Chrome */
        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2">HELLO
            <div id="div3">YELLOW</div>
        </div>
    </div>
</body>
</html>

叨唠

关注

15
点赞
踩
72

收藏

觉得还不错? 一键收藏
1
评论
css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin

注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的1. CSS3 转换：transform属性可以对元素进行移动、缩放、转动、拉长或拉伸注意：Internet Explorer 9 要求前缀 -ms- 版本，Internet Explorer 10, Firefox, 和 Opera支持transform 属性，Chrome 和 Safari 要求...
复制链接

扫一扫

专栏目录