css3 变形

transform

transform 变形 是指通过改变元素的形状或位置

变形不会影响页面的布局，也就是说不脱离文档流（和相对定位 relative 很像）

使用 transfrom: 来设置元素的变形效果
注意：选择器里 只能设置一个 transform ，所以需要把所有的效果都在一起，通过空格隔开

transform: translateX(-50%) translateY(-50%);

其他相关重要属性

html{
    /* 设置视距，才能看到效果 */
    perspective: 800px;
}
.box{
    /* 设置3d变形效果 */
    transform-style: preserve-3d;

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

translate 平移

  • translateX() 沿着X轴方向平移

  • translateY() 沿着Y轴方向平移

  • translateZ() 沿着Z轴方向平移

    注意：平移元素，百分比是相对于自身计算的，这也是和相对定位的区别

元素居中的效果

.posit {
     100px;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    /* 绝对定位居中利用4个偏移量为0 盒子模型布局等式 来使margin为auto来定位 
       但其元素的长宽大小是必须给定的 */
}
.trans {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    /* 而在元素大小不确定，使用绝对定位+位移来实现居中 */
}

translateZ

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离
距离越大，元素离人就越近

z轴平移 属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
就必须设置网页的视距

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

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

body:hover .box1{
    transform: translateZ(600px);
}

z

rotate 旋转

通过旋转可以使元素沿着x y 或 z旋转指定的角度

  • rotateX()
  • rotateY()
  • rotateZ()

旋转值必须带有单位 deg 度 turn 圈

transform: rotateY(45deg) rotateZ(.5turn)

同样，若要有3D效果，需设置视距 perspective

html{
    perspective: 800px;
}

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

    transition:2s;
    /* 是否显示元素的背面 */
    /* backface-visibility: hidden; */
}

body:hover .box1{

    transform: rotateY(360deg) translateZ(300px);
    /* 旋转 和 平移的先后也是有很大区别
       先旋转 再 平移（z轴 放大）
       先平移（z轴 放大） 再 旋转 */
    /* transform: translateZ(300px) rotateY(180deg); */
}

先 旋转 再 平移（z轴 放大）

an

先 平移（z轴 放大） 再 旋转

an2

transform-orign

transform-orign: xxx; 可设置变形的原点

默认是在中间，center center

scale 比例缩放

对元素进行缩放的函数：

  • scaleX() 水平方向缩放
  • scaleY() 垂直方向缩放
  • scaleZ() Z轴方向。。。不常用
  • scale() 双方向的缩放
<!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>
        .img-wrapper{
             200px;
            height: 200px;
            border: 1px red solid;
            overflow: hidden;
        }

        img{
            transition: .2s;
        }

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

    </style>
</head>
<body>
    <div class="img-wrapper">
        <img src="an.jpg" width="100%">
    </div>
</body>
</html>

效果

安妮

练习

钟表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钟表</title>
    <style>
        /* 设置表盘 */
        .container {
             400px;
            height: 400px;
            margin: 50px auto;
            background-image: url("../exercise/img/13/bg.png");
            background-size: cover;
            /* 开启定位 */
            position: relative;
        }
        /* 指针盒子居中 */
        .container>div {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        /* 指针居中 */
        .container>div>div {
            margin: 0 auto;
            /* 所有的都是50% */
            height: 50%;
        }

        /* 时针 */
        .hour-box {
            height: 45%;
             45%;
            /* animation: run 43200s infinite linear; */
            /* 加速版 */
            animation: run 3600s infinite linear;
        }
        .hour {
             8px;
            background-color: black;
        }

        /* 分针 */
        .min-box {
             60%;
            height: 60%;
            /* animation: run 3600s infinite steps(60); */
            /* 加速版 */
            animation: run 300s infinite steps(60);
        }
        .min {
             5px;
            background-color: chocolate;
        }

        /* 秒针 */
        .sec-box {
             80%;
            height: 80%;
            /* animation: run 60s infinite steps(60); */
            /* 加速版 */
            animation: run 5s infinite steps(60);
        }
        .sec {
             3px;
            background-color: red;
        }
        
        /* 关键帧 */
        @keyframes run {
            from {
                transform: rotateZ(0);
            }
            to {
                transform: rotateZ(1turn);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 时针 -->
        <div class="hour-box">
            <div class="hour"></div>
        </div>
        <!-- 分针 -->
        <div class="min-box">
            <div class="min"></div>
        </div>
        <!-- 秒针 -->
        <div class="sec-box">
            <div class="sec"></div>
        </div>
    </div>
</body>
</html>

效果

钟表

复仇者联盟

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复仇者联盟</title>
    <style>
        html {
            /* 设置视距 */
            perspective: 800px;
        }

        .cube {
             200px;
            height: 200px;
            margin: 100px auto;
            /* 设置3d变形效果 */
            transform-style: preserve-3d;
            /* 动画 */
            animation: run 20s infinite linear;
        }
        .cube>div {
             200px;
            height: 200px;
            position: absolute;
            background-repeat: no-repeat;
            /* 透明度 */
            /* opacity: .7; */
        }

        /* 左 */
        .box1 {
            background-image: url("../exercise/img/14/1.jpg");
            transform: rotateY(-90deg) translateZ(100px);
        }
        /* 右 */
        .box2 {
            background-image: url("../exercise/img/14/2.jpg");
            transform: rotateY(90deg) translateZ(100px);
        }
        /* 上 */
        .box3 {
            background-image: url("../exercise/img/14/3.jpg");
            transform: rotateX(90deg) translateZ(100px);
        }
        /* 下 */
        .box4 {
            background-image: url("../exercise/img/14/4.jpg");
            transform: rotateX(-90deg) translateZ(100px);
        }
        /* 后 */
        .box5 {
            background-image: url("../exercise/img/14/5.jpg");
            transform: rotateY(180deg) translateZ(100px);
        }
        /* 前 */
        .box6 {
            background-image: url("../exercise/img/14/6.jpg");
            transform: translateZ(100px);
        }

        /* 关键帧 */
        @keyframes run {
            from {
                transform: rotateX(0) rotateZ(0);
            }
            to {
                transform: rotateX(1turn) rotateZ(1turn);
            }
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </div>
</body>
</html>

效果

复仇者联盟1

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Liwker/p/14253145.html