18 变形：平移，旋转，缩放

最新推荐文章于 2026-01-10 09:51:28 发布

原创最新推荐文章于 2026-01-10 09:51:28 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #html

HTML&&CSS 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了CSS中的变形效果，包括平移、旋转和缩放。平移通过translateX(), translateY()和translateZ()实现，其中百分比是相对于元素自身位置计算的。Z轴平移用于调整元素在三维空间的位置，需要设置透视效果才能观察到。旋转和缩放则分别用于改变元素的角度和大小，是网页设计中常用的视觉效果。" 126156662,13071351,QT编程：数值类型到QString转换指南,"['QT开发', 'C++', '字符串处理']

变形：平移，旋转，缩放

文章目录

变形：平移，旋转，缩放

1.基础知识

变形就是通过css来改变元素的形状或位置

变形不好会影响页面的布局

transform用来设置元素的变形效果

0.平移

translateX()沿X轴方向平移

translateY()沿Y轴方向平移
translateZ()沿Z轴方向平移

百分比是相对于自己位置计算的

几种水平垂直居中方式对比：

1.绝对定位：

.box3{
    background-color: orange;
    position: absolute;
    /* 
    这种居中方式，只适用于元素的大小确定*/
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;}

2.table-cell的方式

/* table-cell的方式具有一定局限性 */
display: table-cell;
vertical-align: middle;
text-align: center;

3.transform的方式：

/* transform变形平移的方式 */
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
/*本质是利用普通的居中后，在利用自身平移达到真正居中的效果*/

浮出效果：

        .box4, .box5{
            width: 220px;
            height: 300px;
            background-color: #fff;
            float: left;
            margin: 0 10px;
            transition:all .3s;
        }

        .box4:hover,.box5:hover{
            transform: translateY(-4px);
            box-shadow: 0 0 10px rgba(0, 0, 0, .3)
        }

2.Z轴平移

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距

<style>
        html{
            /* 设置当前网页的视距为800px，人眼距离网页的距离 */
            perspective: 800px;
        }

        body{
            border: 1px red solid;
            background-color: rgb(241, 241, 241);
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin: 200px auto;
            transition:2s;
        }

        body:hover .box1{
            transform: translateZ(800px);
        }
    </style>

3.旋转

    <style>
        html{
            perspective: 800px;
        }

        body{
            border: 1px red solid;
            background-color: rgb(241, 241, 241);
        }
        .box1{
            width: 320px;
            height: 320px;
            background-color: #bfa;
            margin: 200px auto;

            transition:2s;
        }

        body:hover .box1{

            /*
                通过旋转可以使元素沿着x y 或 z旋转指定的角度
                    rotateX()
                    rotateY()
                    rotateZ()
            */
            /* transform: rotateZ(.25turn); */
            /* transform: rotateY(180deg) translateZ(400px); */
            /* transform: translateZ(400px) rotateY(180deg) ; */
            transform: rotateY(180deg);
            /* 是否显示元素的背面 */
            backface-visibility: hidden;


        }
    </style>

4.缩放

    <style>
        html{
            perspective:800px;
            
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            transition:2s;
            margin: 100px auto;


            /* 变形的原点 默认值 center*/
            /* transform-origin:20px 20px;  */
        }

        .box1:hover{
            /* 
                对元素进行缩放的函数：
                    scaleX() 水平方向缩放
                    scaleY() 垂直方向缩放
                    scale() 双方向的缩放
            */
            transform:scale(2)
        }


        .img-wrapper{
            width: 200px;
            height: 200px;
            border: 1px red solid;
            overflow: hidden;
        }

        img{
            transition: .2s;
        }

        .img-wrapper:hover img{
            transform:scale(1.2);
        }

    </style>