web基础·偏移、旋转、过渡效果、缩放

最新推荐文章于 2022-11-24 21:56:25 发布

昔冰_G

最新推荐文章于 2022-11-24 21:56:25 发布

阅读量1.4k

点赞数

分类专栏：前端标签属性基础文章标签： html css

本文链接：https://blog.csdn.net/qq_38800316/article/details/118344786

版权

前端标签属性基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

位移transform:translate(x,y)

以页面左上角为0，0；transform:translate(x,y)表示移到某个位置

<style>
     div {
            position: relative;
            width: 202px;
            height: 220px;
            background-color: pink;
			transform:translate(100px,100px);
        }
</style>

transform:translateX(100px); 只沿X轴移动

<style>
     div {
            position: relative;
            width: 202px;
            height: 220px;
            background-color: pink;
			transform:translateX(100px);
        }
</style>

transform:translateY(100px); 只沿Y轴移动

<style>
     div {
            position: relative;
            width: 202px;
            height: 220px;
            background-color: pink;
			transform:translateY(100px);
        }
</style>

借助margin来实现子盒子在父盒子中的居中显示前提：知道元素的尺寸

<style>
     div {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
			transform:translate(100px,100px);
     }
    p {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: purple;
            top: 100px;
            left: 100px;
            margin-top: -50px;
            margin-left: -50px;

            /*向上、向左回退自己高度、宽度的一半*/
     }
</style>
<body>
    <div><p></p></div>
</body>

tranform:translate(-50%,-50%)实现盒子的居中显示不知道元素尺寸的时候使用偏移百分比

<style>
     div {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
			transform:translate(100px,100px);
     }
    p {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: purple;
            top: 100px;
            left: 100px;
            transform: translate(-50%, -50%);
            /* 如果不清楚子元素的尺寸，可以通过偏移子元素的宽高的一半 */
     }
</style>
<body>
    <div><p></p></div>
</body>

transform:translate()对于行内元素无效，例如span

相比定位和margin，translate的最大优点：不会影响到其他元素的位置

tranform:rotate() 旋转单位'deg'

<style>
    p{
         position: absolute;
         width: 100px;
         height: 100px;
         background-color: purple;
         top: 100px;
         left: 100px;
         transform:rotate(45deg);
         margin-top: -50px;
         margin-left: -50px;
    }
</style>

会发现这里用的是margin来做的居中而不是tranlate偏移，

是因为当translate和rotate分开写时会影响效果。rotate()被取消效果了

解决办法：

将偏移和旋转写到一起：transform:translate(-50%,-50%) rotate(45deg);

transition过渡效果

过渡写在本身上，谁做动画给谁加！

transition: all 1s;表示所有的变换（缩放/旋转/....）进行1s中

为什么需要添加过渡效果？

例如：旋转360度，直接写transform:rotate(360deg)，无效果，因为360度=0度

所以当加上过渡效果后，就可以规定它在n秒内完成，就可以看到一个完整的变化过程

transform-origin:50px 50px 设置旋转中心

可以是像素、百分比或方位 (right,left,center,botton)

以被操作元素的左上角为0px,0px为基准做旋转中心的设置

<style>
    div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            transform-origin: 50px 50px;
        }
        
        div:hover {
            transform: rotate(360deg);
        }
    
        /*可以是百分比、方位名词(right,left,center,botton)
          transform-origin: 50% 50%; 等同于transform-origin:center center
        */
</style>

transform:scale() 缩放

transfrom:scale(2,2);表示宽高都放大为原来的2倍；等同于transform:scale(2);同倍数缩放

<style>
       div {
            float: left;
            margin: 10px;
            overflow: hidden;
            /* 放大超过的部分隐藏起来就可以实现多余的不扩出来了 */
        }
        
        img {
            width: 200px;
            transition: all 0.8s;
        }
        
        div img:hover {
            transform: scale(1.3);
        }
</style>

昔冰_G

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
web基础·偏移、旋转、过渡效果、缩放

位移transform:translate(x,y)以页面左上角为0，0；transform:translate(x,y)表示移到某个位置<style> div { position: relative; width: 202px; height: 220px; background-color: pink; transform:translate(100px,100px);
复制链接

扫一扫