2D转换之缩放scale（CSS3）

本是古典何须时尚 2023-10-03 13:38 1阅读 0赞

## 2D转换之缩放scale（CSS3） ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>2D转换之缩放scale
        </title>
        <style>
            div {
        
                width: 200px;
                height: 200px;
                background-color: skyblue;
                margin: 100px auto;
                /*    transform-origin: left bottom; */
                /*  也可以设置缩放的中心点 */
            }
    
            div:hover {
        
                /* 1.里面写的数字不跟单位  其数字就是倍数的意思 1就是1倍  2就是2倍 */
                /*  transform: scale(2, 2); */
    
                /* 2.修改了宽度为原来的2倍 ，高度不变 */
                /* transform: scale(2,1); */
    
                /* 3.等比例缩放 同时修改宽度和高度  */
                /*   transform: scale(2); */
    
                /*   4.我们可以进行缩小  小于1 就是缩放 */
                transform: scale(0.5, 0.5);
                /*     5.使用scale的优势是，在缩放的同时，不会影响其他盒子 */
                /*  也可以设置缩放的中心点 */
            }
        </style>
    </head>
    
    <body>
        <div>
    
        </div>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关点云缩放实现——Python Open3D

点云缩放实现——Python Open3D 点云数据是三维空间中的离散点集合，广泛应用于计算机视觉和机器人领域。在进行点云处理时，经常需要对点云进行缩放操作，以便适应不同的需

r囧r小猫/ 2024年03月23日 21:54/ 0 赞/ 165 阅读

相关【CSS3】CSS3 2D 转换 - scale 缩放 ③ ( 使用 scale 设置制作可缩放的按钮案例 )

文章目录一、需求分析二、代码分析三、代码示例四、执行结果一、需求分析 ---------------

红太狼/ 2023年10月14日 14:52/ 0 赞/ 55 阅读

相关【CSS3】CSS3 2D 转换 - scale 缩放 ② ( 使用 scale 设置缩放代码示例 - 图片缩放示例 )

文章目录一、需求分析二、代码分析三、代码示例四、执行结果一、需求分析 ---------------

ゝ一纸荒年。/ 2023年10月14日 14:38/ 0 赞/ 56 阅读

相关【CSS3】CSS3 2D 转换 - scale 缩放 ① ( 使用 scale 设置缩放 | 使用 scale 设置缩放与直接设置盒子模型大小对比 )

文章目录一、使用 scale 设置缩放二、使用 scale 设置缩放与直接设置盒子模型大小对比三、代码示例 1、代码示例 - 设

我不是女神ヾ/ 2023年10月14日 14:24/ 0 赞/ 118 阅读

相关 2D转换之缩放scale（CSS3）

2D转换之缩放scale（CSS3） <!DOCTYPE html> <html lang="en"> <head> <

本是古典何须时尚/ 2023年10月03日 13:38/ 0 赞/ 2 阅读

相关过渡、斜切和2D移动、旋转、缩放。

<style> .box\{ width: 200px; height: 200px; background-color: red; /\

布满荆棘的人生/ 2023年08月17日 17:02/ 0 赞/ 82 阅读

相关 CSS3 2D/3D转换

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。

分手后的思念是犯贱/ 2022年09月21日 05:36/ 0 赞/ 368 阅读

相关 d3成神之路(七)：缩放区域的使用

缩放区域使用的 `zoom` 这个api https://github.com/d3/d3-zoom/blob/v3.0.0/README.md\\_zoom 使用d3.z

女爷i/ 2022年09月10日 13:15/ 0 赞/ 158 阅读

相关 cocos2d-x 两点缩放

在onTouchesBegan中，touches.size()一直是1。这对多点缩放图片，三维模型来说，挺郁闷的。本文把初始值放在onTouchesMoved 中，基本解决问

偏执的太偏执、/ 2022年08月23日 09:56/ 0 赞/ 189 阅读

相关 unity3d粒子缩放

using UnityEngine; using System.Collections; using UnityEditor; pub

傷城~/ 2022年05月27日 11:45/ 0 赞/ 232 阅读