CSS3(transform)-CSDN博客

本文链接：https://blog.csdn.net/buwang_/article/details/79042772

本文深入探讨了CSS中的变换属性，包括rotate、scale、skew和translate等，详细介绍了这些属性如何影响网页元素的位置、大小及旋转角度，并通过具体示例展示了transform-origin属性的作用。

摘要由CSDN通过智能技术生成

<!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>
        .demo{
            width: 100px;
            height: 100px;
            background: red;
            /* transform-style: preserve-3d;
            perspective: 200px; */
            /* 1.transform: rotate3d(1,0,0,45deg); */
            /*transform可以实现元素的形状，角度，位置的变化
            *rotate 以x,y,z轴进行旋转，默认是Z轴
                 rotateX
                 rotateY
                 rotateZ
                 rotate3d(x,y,z,angle) x,y,z矢量方向合成*/

             /* 2.transform:scale3d(2,2,1); */
             /* scale     以x,y轴进行缩放
                scale(x,y)接受两个参数，第二个参数不写默认第一个参数的值
                scaleX()
                scaleY()  
                scaleZ()  0时不见，其余的值没什么效果
                scale3d(x,y,z);*/

            /* 3.transform: skewX(20deg); */
            /* skew()对元素进行倾斜扭曲，接受两个参数，第二个参数未提供默认为0
                skewX(),skewY()*/

            /* 4.transform: translate3d(100px,100px,0); */
            /* translate 移动距离相对于自身的位置
                translateX
                translateY
                translateZ
                translate3d(x,y,z)*/

            /* transform-origin: top; */
            transform-origin: 0 0;
            transform: rotate(45deg);
            margin-left: 100px;
            margin-top: 100px;
            /* 5.transform-origin:变换原点，默认情况下位于元素X轴和Y轴的50%
                可以使用关键词（top right left bottom ）或者百分比
             */
        }

    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>