transform的基本使用和常用特效

先介绍2D转换的transform的基本使用：移动：translate、旋转：rotate、缩放：scale。可分为2D转换的transform和3D转换transform的使用，可以实现元素的移动、旋转、收缩等效果。transform：translate() rotate() scale()有位移先写位移，空格隔开。ranslate最大的优点就是不会影响其他元素，不像边距和定位会影响，但对行内

蔚蓝的生活

4373人浏览 · 2022-08-11 02:46:36

蔚蓝的生活 · 2022-08-11 02:46:36 发布

可分为2D转换的transform和3D转换transform的使用，可以实现元素的移动、旋转、收缩等效果。

先介绍2D转换的transform的基本使用：移动：translate、旋转：rotate、缩放：scale。

一、2D转换之移动：translate

<style>
.first{
   width: 200px;
   height: 200px;
   background-color: brown;
   /* transform: translate(30px,30px);x表示x轴移动的坐标，y表示y轴移动的坐标 */
   /* transform: translateX(30px);x轴移动的坐标，y轴不变 */
   /* transform: translateY(30px);y轴移动的坐标，x轴不变 */
  /* transform: translate(50%,50%);百分比参照的单位是自身的宽高，在这里也就是100px */
}
</style>
<body>
   <div class="first"></div>
</body>

translate最大的优点就是不会影响其他元素，不像边距和定位会影响，但对行内元素无效。

利用translate实现水平垂直居中效果

<style>
.first{
   position: relative;
   width: 200px;
   height: 200px;
   background-color: brown;
}
.son{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: dodgerblue;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
}
</style>
<body>
   <div class="first">
    <div class="son">
    </div>
   </div>
</body>

二、2D转换之旋转：

<style>
.first{
   width: 200px;
   height: 200px;
   background-color: brown;
   /* transform: rotate(45deg);deg相当于度单位，表示旋转45度，
正数为顺时针，负数为逆时针 */
}

</style>
<body>
   <div class="first">
 
   </div>
</body>

用rotate做个三角形箭头

<style>
    .first {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border: 2px solid brown;
/*不要上边框和左边框后旋转45度即可*/
        border-top: none; 
        border-left: none;
        transform: rotate(45deg)
    }
</style>

<body>
    <div class="first">
    </div>
</body>

rotate鼠标滑过翻转效果

<style>
    .first {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border: 2px solid brown;
        border-top: none;
        border-left: none;
        transform: rotate(45deg);
        transition: transform 0.5s;
    }
    .first:hover{
       /*180+45=225要转的度数*/
        transform: rotate(225deg)
    }
</style>

<body>

transform-origin设置旋转中心点

<style>
    .first {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background-color: brown;
      /* transform-origin: bottom left; 可以用方位词*/
     /* transform-origin: 50px 50px; 也可以用像素 */
        transition: transform 0.3s;
    }
    .first:hover{
        transform: rotate(360deg);
    }
</style>

<body>
    <div class="first">
    </div>
</body>

注意用空格隔开

旋转做卡片滑动效果

<style>
    .first {
        overflow: hidden;
        /* 隐藏子元素 */
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border: 1px solid black;
        
    }
    .son{
        width:200px;
        height:200px;
        background-color: brown;
        transform: rotate(180deg);
        transform-origin: bottom left;
        /* 改变中心点为左下角 */
        transition: transform 0.5s;
        /* 过渡效果 */
    }
    .first:hover .son{
        transform: rotate(0deg);
    }
</style>

<body>
    <div class="first">
        <div class="son">哈哈哈</div>
    </div>
</body>

三、2D转换之：缩放

.first:hover {
        /* 表示xy的倍数，小于1的为缩小，大于1为放大 */
        /* transform: scale(2,2); */
        /* 也可以写成一个表示xy比例一样 */
        /* transform: scale(2); */
    }

优势是不会影响其他盒子

图片放大的效果

<style>
    .first {
        overflow: hidden;
        margin: 100px auto;
        width: 300px;
        height: 300px;
    }
    img{
        width: 100%;
        height: 100%;
        transition: transform 0.7s;
    }
    img:hover{
        transform:scale(1.2)
    }
</style>

<body>
    <div class="first">
        <img src="../resource/pocket.png" alt="">
    </div>
</body>

综合写法

transform：translate() rotate() scale()有位移先写位移，空格隔开。

3D转换的transform

一、3D转换之移动

有透视才能看到z轴效果

二、 3D转换之缩放

<style>
    .first {
        margin: 100px auto;
        width: 300px;
        height: 300px;
        perspective: 300px;
/*透视值越小效果越明显近大远小*/
    }
    img{
        width: 100%;
        height: 100%;
        transition: all 1s;
    }
    img:hover{
        /* 立体效果要在父元素中加透视 */
        /* transform:rotateX(130deg)
        transform:rotateY(130deg) 
        transform:rotateZ(130deg) 
        
        */
    }
</style>

<body>
    <div class="first">
        <img src="../resource/pocket.png" alt="">
    </div>
</body>

子元素开启立体空间

transform-style: preserve-3d

旋转木马的特效

<style>
    body {
        perspective: 1000px;
    }

    section {
        position: relative;
        width: 300px;
        height: 200px;
        margin: 150px auto;
        transform-style: preserve-3d;
        animation: rotate 3s linear infinite;
        background: url(../resource/pocket.png) no-repeat;
    }

    section div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../resource/hashiqi.webp) no-repeat;
    }

    @keyframes rotate {
        0%{
            transform: rotateY(0);
        }

        100%{
            transform: rotateY(360deg);
        }
    }
    section:hover{
            animation-play-state: paused;
        }

    section div:nth-child(1) {
        transform: translateZ(300PX);
    }

    section div:nth-child(2) {
        transform: rotateY(60deg) translateZ(300PX);
    }

    section div:nth-child(3) {
        transform: rotateY(120deg) translateZ(300PX);
    }

    section div:nth-child(4) {
        transform: rotateY(180deg) translateZ(300PX);
    }

    section div:nth-child(5) {
        transform: rotateY(240deg) translateZ(300PX);
    }

    section div:nth-child(6) {
        transform: rotateY(300deg) translateZ(300PX);
    }

   
</style>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>