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

原创已于 2022-03-17 12:57:53 修改 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

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

前端、Java 专栏收录该内容

31 篇文章

订阅专栏

本文探讨了CSS中的absolute定位与transform属性在调整元素位置、缩放和旋转时的不同效果，重点介绍了transform-origin设置和3D旋转的应用实例。

背景介绍
进行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>