2D转换之缩放 transform:scale()(笔记)

2023-05-16

4.5 2D转换之缩放scale
缩放,顾名思义,可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
缩放
1.语法
transform : scale(x,y); 
2.注意
注意其中的x和y用逗号分隔
transform:scale(1,1)︰宽和高都放大一倍,相对于没有放大transform:scale(2,2)︰宽和高都放大了2倍
transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2)transform:scale(0.5,0.5):缩小
sacle缩放最大的优势∶可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
 

    <style>
        div{
            width: 230px;
            height: 160px;
            border: 1px solid red;
            margin: 100px auto;
            text-align: center;
            /* overflow: hidden; */
        }
       img{
         transition: all 6s;
       }
       img:hover{
           transform: scale(5);
       }
    </style>
</head>
<body>
    <div>
        <img src="images/pro_07.jpg" alt="">
    </div>
   
</body>
</html>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

2D转换之缩放 transform:scale()(笔记) 的相关文章

  • 透视变换三角点

    我试图找到从一个三角形到另一个三角形的等效点 理想情况下 我希望能够给出三角形 A 的 3 个点和三角形 B 的 3 个点 然后计算变换矩阵 然后将其应用于该点以找到等效点 我为此找到了一些 JavaScript 库 方法 但它们都使用四边
  • 如何使用python将一幅图像的相位和不同图像的幅度组合成一幅图像

    我想将一幅图像的相位谱和不同图像的幅度谱组合成一幅图像 我得到了图像A和图像B的相位谱和幅度谱 这是代码 f np fft fft2 grayA fshift1 np fft fftshift f phase spectrumA np an
  • 如何修复 React Native 中的“translatex 键的转换必须是数字”错误?

    我正在尝试在 React Native 中制作翻译动画 这是我的代码 const scrollX React useRef new Animated Value 0 current
  • 在张量流中调整 3D 数据的大小,如 tf.image.resize_images

    我需要调整一些 3D 数据的大小 例如tf image resize images二维数据的方法 我想我可以尝试跑步tf image resize images在它上循环并交换轴 但我认为一定有一种更简单的方法 简单的最近邻应该没问题 有任
  • 使用 PIL 缩放图像并保持透明度和颜色?

    假设您想要缩放透明图像 但还不知道稍后将其合成的背景颜色 不幸的是 PIL 似乎合并了完全透明像素的颜色值 导致了糟糕的结果 有没有办法告诉 PIL resize 忽略完全透明的像素 import PIL Image filename tr
  • 如何在ggplot中缩放独立层的颜色?

    我有一个数据集 记录了三座建筑物的能源使用情况 我有一个融化的数据框 可以从钻石组中模仿 data lt melt diamonds c depth table cut color id c cut color 本质上 我有来自三个不同建筑
  • 获取 NSTextField 内容以缩放

    我怎样才能让文本比例适合我给它的边界 我过去也做过类似的事情 void calcFontSizeToFitRect NSRect r float targetWidth r size width xMargin float targetHe
  • CSS3 缩放变换和溢出问题:在 Safari 上隐藏

    我在 Safari 上遇到缩放变换效果和溢出问题 当我在 div 内容上使用此效果时 溢出在圆形容器上不起作用 这是我的代码 container width 100px height 100px border radius 50 backg
  • CSS 变换比例 - 图像仍然占用空间

    当将以下 CSS 属性添加到图像时 图像仍然占据与大小为 100 时相同的空间 有没有办法让文本填充该图像周围的空间 transform scale 0 2 height auto float right 据我了解 这不是转换的工作原理 它
  • 以良好的质量和内存效率缩小资源中的位图

    我想缩小 500x500px 资源以始终适合由屏幕宽度确定的特定尺寸 目前我使用 Android 开发者网站 高效加载大位图 http developer android com training displaying bitmaps lo
  • 将 XSLT 转换作为构建步骤执行

    在 Visual Studio 构建期间 我需要从另一个 XML 文件生成一个 XML 文件 对我来说 很明显 XSLT 模板和转换正是我所需要的 我更喜欢实现此目的的方法是使用项目文件中的 自定义工具 属性 是否已经有一个内置工具可以用于
  • Matlab,如何获取imagesc生成的结果?

    我读过一些类似的文章 但它们不是我想要的 得到imagesc之后的矩阵 https stackoverflow com questions 14364239 get the matrix after imagesc 14364434 143
  • 在 Safari 中转换变换和大小 (9.1)

    我试图在元素上实现平滑过渡transform translate 和一些其他属性 是的 我读过有关匹配供应商前缀的内容 它在 Chrome 和 FF 中工作正常 但在 Safari 中它不能平滑地动画转换 在最后跳转 在应用翻译之前 它似乎
  • canvas:如何在一个变换语句中完成平移、倾斜、旋转...?

    最近几天我在学习 变换 现在我知道如何通过变换的矩阵进行平移 旋转 倾斜 缩放 但如果我想在一个转换语句中执行上述所有操作 我该怎么办 ctx transform a b c d e f 当我们想要通过变换旋转某些东西时 我们必须为每个参数
  • CSS3 矩阵 3d 矩形到梯形的转换

    我正在尝试使用 webkit 对 CSS3 的支持transform matrix3d
  • R.scale() 和 sklearn.preprocessing.scale() 之间的区别

    我目前正在将数据分析从 R 转移到 Python 当在 R 中缩放数据集时 我将使用 R scale 根据我的理解 它将执行以下操作 x mean x sd x 为了替换该函数 我尝试使用 sklearn preprocessing sca
  • IE9-11 检测变换样式:preserve-3d

    我为一个项目制作了一个 3d 类型的菜单 自然 IE 会引起问题 因为 IE10 即使 3d 变换工作 也不支持变换样式 preserve 3d 我尝试了解决方法 通过对 3d 菜单容器的每个子元素应用变换 但至少可以说 动画看起来很糟糕
  • CSS3DObject 始终位于 WebGL Mesh 前面

    我正在混合CSS3D Renderer with WebGL Renderer to add HTML3D 空间中的元素WebGL场景 这CSS3DObject在前面WebGL网格即使WebGL Renderer具有较高的 z index
  • 将 String 转换为 byte,然后转换为 int

    我发现了很多关于这个主题的问题 但我无法解决我的问题 用户将输入一个名字String我需要将其转换为List
  • css 变换,chrome 中的锯齿状边缘

    我一直在使用 CSS3 转换来旋转网站中带有边框的图像和文本框 问题是 Chrome 中的边框看起来呈锯齿状 就像没有抗锯齿的 低分辨率 游戏一样 在 IE Opera 和 FF 中看起来好多了 因为使用了 AA 仍然清晰可见 但也没有那么

随机推荐