transform元素

过度:transition: all 0.5s;
如果使用多重转换如:

            transform: translate(600px) rotate(900deg);
一定是要线平移在旋转
如果是先旋转的话就还会改变xy轴的轨迹
描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4×4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .f{
            width: 300px;
            height: 300px;
            background-color:burlywood ;
            box-sizing: border-box;
             overflow: hidden;
        }
        .z{
            width:300px;
            height: 300px;
            transition: all 0.5s;
            margin-top: 300px;
        }
     
        .f:hover .z{
            transform: translate3d(0  ,-300px, 20);
        }
      /* .f:hover p{
        transform: translate(50px,400px);
       }
       */


    </style>
</head>
<body>
    <div class="f">
        <!-- <P style="margin-top: 300px;">
            123456465156313
        </P>
      -->
        <div class="z">
            <p>山雄有脊,房固因梁。实现这一重大转折,根本在于有以习近平同志为核心的党中央坚强领导,在于有习近平新时代中国特色社会主义思想的科学指引。历史再次证明,中国共产党是领导我们事业的核心力量。没有中国共产党,就没有新中国,就没有中华民族伟大复兴。

            </p>
        </div>

    </div>
</body>
</html>

 

您可能还喜欢...