transform位移、缩放、旋转效果(hover、transition、trasform)

小XiaXia

已于 2022-03-17 12:57:53 修改

阅读量2.1k

点赞数

分类专栏：前端、Java 文章标签： html css

于 2021-02-20 00:40:53 首次发布

本文链接：https://blog.csdn.net/m0_51055743/article/details/113873922

版权

前端、Java 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

背景介绍
进行absolute绝对定位，改变位置时，脱离文档流，影响布局
使用transform属性，不影响其他元素布局，只在原来的位置上发生了偏移

这2种效果一样

在这里插入图片描述

transform的缩放和旋转

缩放：
1为正常大小，正常情况下，变形时的原点在元素中心位置，但，可改变原点位置transform-oringin：50% 50%（默认位置，中心）
放：transform:scale(1.5);
缩：transform:scale(0.6);
在这里插入图片描述

在这里插入图片描述

旋转(3D立体效果）：
transform:rotateX/rotateY/rotateZ;

沿X/Y/Z轴做顺时针旋转
在这里插入图片描述

Z轴是垂直屏幕的直线

总结：
在这里插入图片描述

<!DOCTYPE>

<head>
    <title>transform位移、缩放、旋转效果</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            float: left;
            position: relative;
            width: 500px;
            height: 750px;
            margin: 100px 200px;
            overflow: hidden;
        }
        .box>img{
            width: 500px;
            height: 750px;
        }
        .box>*{
            transition: 1s;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .box h2{
            color: white;
            width: 200px;
            transform: translateX(20px) translateY(450px);
        }
        .box p{
            color: white;
        }
        .box p:nth-of-type(1){
            transform: translateY(140px) translateX(-150px);
        }
        .box p:nth-of-type(2){
            transform: translateY(180px) translateX(-150px);
            transition: 1s 0.1s;
        }
        .box p:nth-of-type(3){
            transform: translateY(220px) translateX(-150px);
            transition: 1s 0.2s;
        }
        /*鼠标滑动效果*/
        .box:hover p:nth-of-type(1){
            transform: translateY(300px) translateX(10px);
        }
        .box:hover p:nth-of-type(2){
            transform: translateY(350px) translateX(10px);
        }
        .box:hover p:nth-of-type(3){
            transform: translateY(400px) translateX(10px);
        }
        .box:hover img{
            transform: scale(1.3) rotateZ(-15deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/reba.jpg">
        <h2>迪丽热巴</h2>
        <p class="p1">Birthday:1992.6.3</p>
        <p class="p2">Height:168cm</p>
        <p class="p3">Weight:47kg</p>
    </div>
</body>

</html>

效果：
鼠标放上呈现的效果，有用
在这里插入图片描述
到transition，transform

小XiaXia

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
transform位移、缩放、旋转效果(hover、transition、trasform)

背景介绍进行absolute绝对定位，改变位置时，脱离文档流，影响布局使用transform属性，不影响其他元素布局，只在原来的位置上发生了偏移这2种效果一样transform的缩放和旋转缩放：1为正常大小，正常情况下，变形时的原点在元素中心位置，但，可改变原点位置transform-oringin：50% 50%（默认位置，中心）放：transform:scale(1.5);缩：transform:scale(0.6);旋转(3D立体效果）：transform:ro.
复制链接

扫一扫