CSS踩坑-------transform:scale(‘数字’)

最新推荐文章于 2024-05-24 16:01:01 发布
最新推荐文章于 2024-05-24 16:01:01 发布
阅读量974 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Stefan1/article/details/107518384
版权

transform:scale(‘数字’)

今天进行HTML页面格式修改大致代码如下：

<style type="text/css">
    .login_row{
        width: 90%;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
        border-bottom: 1px solid #eee;
    }
    .font_14{
        display: inline-block;
        font-size: 14px;
    }
    .text-14{
        display: inline-block;
        font-size: 14px;
        float:right;
    }
    .pullDown_img{
        display: inline-block;
        float:right;
        transform:scale(0.4)

    }
</style>
<body class="background_fff">
<header style="display: none">
    <span>礼券发放</span>
</header>
<div class="clearFix d-flex flex-column a-center pt-4">
    <div class="login_row">
        <div class="font_14 color_1a mb-2 font-family">活动名称</div>
        <div class="pullDown_img">
最低0.47元/天 解锁文章
Stefan1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS transform-origin属性的理解
09-22
**CSS transform-origin属性详解** **一、属性定义与作用** `transform-origin` 是CSS3中的一个变换属性，它用于指定元素在进行旋转、缩放、移动或倾斜等变换操作时的基点，即变换的原点。这个原点默认位于元素的...
CSS使用transform-origin，解决transform: scale()后导致的页面元素位置偏移
孜然卷的博客
10-17 1895
这时候使用transform-origin给一个0% 0% 上下，左右的偏移。这时候位置就回到了原先的定位。
iframe嵌入网页时，页面大小怎么自适应
五花漏的博客
02-24 3万+
问题描述： 页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果： 可以看到嵌入的页面只露出了一部分。 而我们希望：嵌入的页面能够完全展示在容器中。 思路：利用CSS的 transform，进行页面缩放。 1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。 2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧
大屏幕适配方法之：transform:scale()
最新发布
Mahuicool的博客
05-24 815
CSS3新增的属性transform主要用于设置元素的变形，比如旋转、倾斜、缩放等。我们今天要用到的正式它的缩放功能transform:scale()
postionfixed固定_详解如何解决position:fixed固定定位偏移问题
weixin_36277530的博客
02-02 1345
问题css固定定位position:fixed很容易使用，就是相对浏览器的viewport进行定位，top:0;left:0就是在左上角。.container{width: 100px;height: 100px;background: #888;position: fixed;top: 100px;left: 100px;}当父级元素设置transform之后.BFC-box{margin:20...
Mapbox1.x transform:scale 缩放坐标偏移bug修复方案
h666000的博客
07-18 2273
以上的canvas元素如果进行缩小那rect.left和el.clientLeft中间会有空出空白空间没法计算得到的point坐标是错误的。把point变成鼠标指针相对于目标节点内边位置的X和Y坐标。修复mapbox地图源码-计算事件坐标添加位置的函数。一张图描述以上代码返回的坐标计算。用Unfull进行反缩放。用iframe进行嵌入。......
css深入剖析transform的scale
xun__xing的博客
07-19 2119
这里写目录标题一、scale1.伸缩性2.叠加性3.保留影响二、scale3d 一、scale 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。 伸缩的是此元素的变化坐标轴的刻度 1.伸缩性 .box { width: 100px; height: 100px; background-color: black; transform-origin: 0 0; transform: scale(2,2); /* transform:
vue-free-transform：VueJS免费转换工具组件
02-04
yarn install vue-free-transform或npm install vue-free-transform --save 演示版 用法 import FreeTransform from 'vue-free-transform' < FreeTransform : x = " 0 " : y = " 0 " : scale-x = " 1 " : ...
css3的transform造成z-index无效解决方案
09-25
在CSS3中，`transform`属性是一个非常强大的工具，它允许我们对元素进行旋转、缩放、平移等多种视觉变换。然而，当使用`transform`时，它会产生一个新的堆叠上下文（stacking context），这可能导致`z-index`的行为...
CSS3中设置3D变形的transform-style属性详解
09-24
transform-style经常被用来做三维空间坐标系中的图形变换,下面我们就来看看CSS3中设置3D变形的transform-style属性详解,需要的朋友可以参考下
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀
05-12
$ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be processed const css = fs . readFileSync ( "input.css" , "utf8" ) const out ...
CSS中的transform的简单使用
news_out的博客
01-08 3825
transform 1.旋转：transform: rotate(45deg) 以角度(deg)为单位，正数是顺时针旋转，负数是逆时针旋转 。 2.缩放：transform: scale(0.5) 或者 transform: scale(0.5,0.4) 一个参数：表示水平跟垂直方向同时缩放0.5，等同于scaleX(0.5) 两个参数：第一个参数表示水平方向的缩放比例，第二个参数表示垂直方...
CSS踩坑
marko_zheng的博客
03-21 284
CSS跳坑 视差滚动 网页再向下滑动的时候，控制背景的移动速度比前景的移动速度慢，造成视差 CSS3方式，开发时间短，性能开发性良好，缺点是不能兼容低版本 jQuery实现 ，控制不同层的滚动速度 插件的方式， eg parallax-scrolling ::before和：after中的双冒号和单冒号的区别 单冒号 css3伪类选择器，双冒号用于伪元素选择器 ::befo...
css transform:scale缩放后位置偏移问题解决
sunzhen15896的博客
09-01 9581
css相关问题
Transform的属性及使用
小谭鸡米花的博客
10-23 3万+
前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、transform是什么？ Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 二、transform的属性值 假如有一个盒子，高度两百像素，宽度两百像素，设置一个背景颜色，下面来用这个盒子来观察transform每个属性值的效..
CSS3 transform笔记
Spotlight_mar的博客
02-20 520
一、对称与角度变化例：transform: scaleX(-1) rotate(20deg); //通过scaleX(),scaleY(),scale()等取-1值进行对称，取正值则按比例变化
CSS transform: scale数值为负数实现翻转
黄彪博客
06-30 3400
文章目录文章参考问题描述scaleX 属性说明scale数值为负数实现翻转 文章参考 CSS3 transform 属性 你所不知道的 CSS 负值技巧与细节 问题描述 在工作中，发现引入一个图片是正常显示，但是使用背景图之后，发现图片的方向变反了，找大牛来排查问题，最终发现是使用了 transform: scaleX(-1);引起的 scaleX 属性说明 |scale(x,y)|定义 2D 缩放转换。| |scale3d(x,y,z)|定义 3D 缩放转换。| |scaleX(x)|通过设置 X 轴
使用transform的scale缩放的写法误区
热门推荐
前端工程师--则丸
08-31 3万+
聊一聊本人发现的使用transform的scale缩放属性的写法误区 在使用对块级元素（非块级元素无transform属性）transform: scale(.88);   时， 由于自身宽高都会缩小，原本使用left: 0;  看上去会显得像 left: 20px; 或者更大, 所以我就按部就班，使用 transform: scale(.88)  translateX(
css 的 transform:scale(-1,1) 使得fixed定位失效（fixed会降级为absolute）问题
qq_40101922的博客
10-19 5139
最近写一个阿拉伯国家的web，因为阿拉伯语言的阅读习惯是从右到左，而且本来就有做好了的英语版本的web，为了快速开发，就把英语版本的web复制一份出来，在调整一下css样式就好了，如下： 在HTML根元素加上css： body{ transform:scale(-1,1)； } //这样，整个web布局就会反过来。 但是，HTML内的文字也反过来了，所以这时，就可以在对应包裹文字的元素再把...
-webkit-transform:scale()
05-10
这是CSS中的一个属性，用于缩放元素的大小。scale()函数接受一个...所以，-webkit-transform:scale()仅在使用WebKit引擎的浏览器中生效，如Chrome、Safari等。在其他浏览器中，应该使用标准的transform:scale()属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值