记一个CSS中的transform小坑

最新推荐文章于 2024-05-21 21:13:29 发布
最新推荐文章于 2024-05-21 21:13:29 发布
阅读量76 收藏
点赞数
分类专栏： CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caii19/article/details/133342303
版权

画大屏项目中需要将九个大屏合成一个做成九宫格样式，所以准备使用transform：scalc（）缩小每个大屏 ，但发现缩小的大屏仍然占据原先设置的1920*1080大小，看了网上解决办法使用zoom,可是这样会让我原先大屏的样式错乱，最终方法是使用定位一个个定位上去，不知道有没有更好的解决方法

19cai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个css 的小问题
10-31
一个css 的小问题
【网页开发】css关于网页端transform的scale()缩放白边问题
小卓仗剑走天涯的博客
01-19 4377
css关于网页端transform的scale()缩放白边问题
React 中关于 key 的基础知识
Web_blingbling的博客
09-21 437
在 React 中，当创建一个元素时，必须包括一个特殊的 key 属性，否则，运行代码时，将会看到一个警告 a key should be provided for list items 为什么要用 key key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。在新增 key 之后使得之前的低效转换变得高效。 设置 key 通常，我们使用数据中的 id 来作为元素的 key： <li key={xxx.id}> 当元素没有确定
CSS基础
烟渺睿晨的博客
07-06 576
盒子包括边框(border)、外边距(margin)、内边距(padding)、实际内容(content) 边框(border)可以设置元素的边框，边框又三个部分：边框宽度，边框样式，边框颜色 border-width 定义边框粗细，单位px border-style 定义边框样式(solid 实线,dashed 虚线边框,dotted 点线边框) 详情查询手册 border-color ......
css3 transform缩放scale空白隐藏
weixin_44999830的博客
11-12 4479
1、使用overflow:hidden解决 .lm-seat-wrap { overflow: hidden; -webkit-transform: scale(0.62); transform: scale(0.62); -webkit-transform-origin: 10% top; transform-origin: 10% top; } 2、使用posi...
transform: scale(x, y) 等比缩放后，出现白边 / 滚动条 的解决方案
Lyrelion的博客
12-23 8961
transform: scale(x, y) 等比缩放后，出现白边 / 滚动条 的解决方案
详解transform:translate(-50%,-50%)
热门推荐
qq_41083105的博客
03-26 3万+
关于transform:translate(-50%,-50%) 这个其实就是一个位移的属性，translatex在x轴方向上进行移动，反之translatey实在y轴方向，而translate括号里的两个参数是先x后y的。 这句话的应用场景是实现块居中，具体实现如下： <style> .outer { width: 300px; height: 300px; posit...
transform:translate过程中overflow:hidden失效，内容溢出显示
shine_scp的博客
07-22 2641
在chrome中正常，在IE 11中，移动的过程，会显示溢出的内容，移动结束恢复。 解决方案： .container{ ...styles, //关键代码 backgroud:#ddd; opacity:0.99; } 亲测有效，据说是用移动端，方案来自https://jbkflex.wordpress.com/2013/04/04/css3-transformations-showin...
JavaScript中setAttribute（）和removeAttribute（）的用法
me_Ahero的博客
12-22 3563
在Selenium 中会遇到用setAttribute（）为元素增加属性以及用removeAttribute（）为元素删除属性，下面总结下两者用法： JavaScript中setAttribute（）用法 定义：为元素增加一个指定名称和值的新属性，或者把元素的一个现有属性设定为指定的值 用法：elementNode.setAttribute(name,value) name：要设置的属性名 value:要设置的属性值 实例：element.setAttribute(attributename,attr
2019 前端面试经典
qq_29648689的博客
07-22 317
「 CSS篇 」 1. CSS 盒子模型，绝对定位和相对定位 2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法 当子元素设置了float属性之后，且父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0) 解决这种问题的方式主要有两种： a.在父元素内添加冗余元素clear:both; ...
CSS3中Transform动画属性用法详解
09-27
主要为大家详细介绍了CSS3中Transform动画属性用法，教大家如何实现2D transform变换、3D transform变换，感兴趣的小伙伴们可以参考一下
一个css transform效果 很有图片的感觉
09-25
一个css transform效果（是不是很有图片的感觉），兼容IE,FF,Chrome,Safari，不支持Opera
通过CSS3中的transform来绘制一个3D立方体
03-25
通过CSS3中的transform来绘制一个3D立方体
css中如何让元素在父元素中水平或垂直居中
qq_46472106的博客
08-09 645
如何让元素在父元素中水平或垂直居中 一、行内元素：text-align：center line-height：height 二、块级元素： 1.给父元素设置display:flex属性 align-items:center justify-content:center 2.给父元素设置display：flex属性，给子元素设置margin：auto 3.给父元素设置定位属性，子元素设置绝对定位，并且使用配合属性left:50%;top:50%;让子元素左上角移动到父元素中心位置；然后再让子元素使用margi
transform导致溢出_CSS3变换缩放和容器与溢出
weixin_39933082的博客
12-22 607
I am trying to create a zoom-in functionality for a container with CSS3 Transform (scale) and all seems to work nicely, but when the image is scaled, the overflow only covers a part of the image, leav...
html 图片使用scale,缩放：scale() - CSS3 | 绿叶学习网
weixin_35975177的博客
06-09 1171
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。语法：transform: scaleX(x); /*沿X轴方向缩放*/transform: scaleY(y); /*沿Y轴方向缩放*/transform: scale(x, y); /*沿X轴和Y轴同时缩放*/说明：跟tr...
详解CSS（一）
Romised的博客
05-18 1034
CSS是什么、.基本语法规范、引入方式、内部样式表、行内样式表、外部样式表、选择器、基础选择器、标签选择器、类选择器、id选择器、通配符选择器、复合选择器、后代选择器、子选择器、并集选择器伪类选择器、字体属性、文本属性、文本颜色、文本对齐、文本装饰、文本缩进、行高
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 142
HTML,CSS,JavaScript,DOM的理解
CSS中的writing-mode属性：解锁文本布局新维度
最新发布
艾恩小灰灰的博客
05-21 207
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
css 中transform
11-12
CSS中的transform属性可以实现元素的旋转、缩放、倾斜、移动等变形效果。transform属性可以与transition、animation等属性结合使用，实现更加丰富的动画效果。 以下是transform属性的常用值及其作用： 1. rotate(angle)：旋转元素，angle为旋转角度，正值为顺时针旋转，负值为逆时针旋转。 2. scale(x,y)：缩放元素，x和y分别为水平和垂直方向的缩放比例，取值范围为0~1之间。 3. skew(x-angle,y-angle)：倾斜元素，x-angle和y-angle分别为水平和垂直方向的倾斜角度。 4. translate(x,y)：移动元素，x和y分别为水平和垂直方向的移动距离。 下面是一个例子，展示如何使用transform属性实现元素的旋转和缩放： ```css .box { width: 100px; height: 100px; background-color: red; transform: rotate(45deg) scale(0.5, 0.5); } ``` 上述代码将一个宽高为100px的红色正方形元素旋转45度并缩小一半。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值