css3-- transform: translate(-50%,-50%)；

于 2023-07-25 09:53:04 发布
阅读量344 收藏
点赞数 1
文章标签： css3 html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nuanpang/article/details/131911052
版权

代码：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置

暖暖胖胖
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-native-knowledge:关于本机的摘要
05-01
react-native 相关知识 后面简称 RN。 实现Toast或Dialog 在css里面，实现方式： 各种postion定位 z-index设置成最大 top，left各50% margin-left, margin-top设置成宽高的一半（如果元素宽高不定，可以使用transform: translate(-50%, -50%)） RN本身没有z-index的这种层的概念，如果元素出现在相同的位置，后面的元素会覆盖前面的元素。 居中对于flex来说就是小case了,只需要在父元素上面加上： flex: 1, justifyContent: 'center', alignItems: 'center' 参考 background-image repeat效果 css 里面的实现方式没啥好说的。 RN 不支持 background-image 这货，repeat 更不用想了，可以用
css-to-react-native:将CSS文本转换为React Native样式表对象
05-02
CSS到本机 将CSS文本转换为React Native样式表对象。 font-size : 18 px ; line-height : 24 px ; color : red; { fontSize : 18 , lineHeight : 24 , color : 'red' , } 将所有类似于数字的值转换为数字，并将类似字符串的值转换为字符串。 自动将间接值转换为其等效的React Native。 text-shadow-offset : 10 px 5 px ; font-variant : small-caps; transform : translate ( 10 px , 5 px ) scale ( 5 ); { textShadowOffset : { width : 10 , height : 5 } , fontVariant : [ '
CSS中的translate(-50%,-50%)实现水平垂直居中效果
01-21
translate(-50%,-50%) 属性： 向上和左，移动自身长宽的 50%，使其居于中心位置。 与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate函数中的百分比是相对于自身宽高的百分比 (使用top和left为50%时，以窗口左上角为原点)。 示例： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, ini
ie-css-transform:您将 css 转换（2d 或 3d）和可选的转换原点值传递给的函数，它将尝试为 ie6 - ie8 模拟它
06-02
ie-css-transform 您将 css 转换（2d 或 3d）和可选的转换原点值传递给的函数，它将尝试为 ie6 - ie8 模拟它。 对于支持 css 转换的浏览器，它只会使用 css 转换属性。 IE 中支持的变换属性：所有 2d 和 3d 变换，但是 3d 旋转（rotateX、rotateY）看起来不正确，因为没有透视变换。 用法 var applyTransform = require ( 'ie-css-transform' ) ; var el = document . createElement ( 'div' ) ; applyTransform ( el , 'perspective(1000px) translate3d(100px, 100px, 500px)' , '0% 0%' ) ; el . style . width = el . styl
CSS3
10-15 375
简述：CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。CSS3的新增内容也就是新增属性。 (一)CSS3 边框 用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。 CSS3 圆角(border-radius) border-radius的值如果大于width或者height的一半的时候，元素将变为一个...
css中的“ transform: translate(-50%, -50%)； “的意思
qq_45207162的博客
06-14 5245
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
CSS_变形之平移&旋转&缩放
weixin_45084986的博客
03-23 585
平移translate X和Y轴平移 transform: translateX(-50%) translateY(-50%); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background-color: #dddddd } .
css3的transform属性
weixin_43353035的博客
03-10 219
translate移动 1、2d的移动 2、3d的移动 3、使用 translate 移动的优点：不会影响其它盒子，但是对行内元素不起作用 // 常用知识点 // transform: translate(50%, 50%); 百分比是相对与自身的 // 设置盒子水平居中，垂直居中 <style> .father { position: relative; } .child { position: absolute; left: 50%; top: 50%; t
transform:translate (-50%,-50%) 造成的文字模糊和解决方案
热门推荐
豆之助
04-17 1万+
首先先上图，图片为工作项目图片，为了避嫌，打了个码。 如图所示，为了让文字在一个div中水平垂直都居中显示，用absolute定位和transform将文字放在了一个div的中间位置， 此时字号并不小，但字体边缘模糊。 这是因为transform时div的宽度或者高度并不是偶数，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上。 解决方案是使用flex
元素居中 前端
qq_48254349的博客
11-26 194
<!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>Doc
css3 transform过渡抖动问题解决
01-18
transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如： transform: scale(1.2); 换成： transform: scale(1.2) rotate(0.1deg);...clac是css3
css3-- transform: translate(-50%,-50%);
yueliangyefan的博客
06-27 7568
代码： position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 ...
03前端学习之CSS3(2)
浅弋、璃鱼的博客
02-11 508
文章目录十四、用户界面样式：1. 鼠标样式(cursor):2. 轮廓(outline)3. 防止拖拽文本域(resize):4. 垂直对齐(vertical-align):4.1 取出图片底侧空白缝隙:十五、溢出的文字隐藏:1. 自动换行1.1 word-break:1.2 hite-space:1.3 text-overflow 文字溢出: 十四、用户界面样式： 所谓用户界面样式, 就是改变一...
css之动画
weixin_44108577的博客
05-13 875
css动画 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style 3d动画 perspective 这个 perspective（视域）属性通常作用在外部容器元素上，例如body，figure和 div 等标签上。这样我们就在3D空间操作内在的子元素。你可以将这个属性理解为类似flex box这个属性，因为其也可以影响内部元素的外观和位置。如果没有这个属性，即使我们应用了 CSS 3D 的Transforms属性我们也无法看到预期的
详解transform:translate(-50%,-50%)
qq_48254349的博客
12-13 8292
首先要理解元素居中的原理 transform:translate(-50%,-50%)也是同理 <!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-w
transform使用过程中的问题
weixin_58214297的博客
05-08 285
transform:translateX(300px) rotate(360deg); 其中rotate不能单独使用 transform: translate(-50%,-50%) scale(1); 其中scale不能单独使用 rotate，scale若要单独使用必须再本行代码以下添加 若再其上面添加 则不生效 ...
CSS 动画 过渡
jasonjkj的博客
09-18 599
CSS 3 高级 1.转换（3D ，2D） 转换的简介，转换即变形 1.转换属性 transform:none(默认值) /‘transform-function(转换函数)’    空格来分割多个转换函数（transform-function()） 2.转换原点（默认中心点） 属性:transform-origin: 取值:按照元素左上点为(0,0)  可以给px 或者百分比或者关
CSS3记录 -transform(-50%,-50%)为什么会跟定位一起使用,会有居中的作用!
ChangAnbaba的博客
07-23 976
这是一次记录，一年前就已经学到transform，也知道transform(-50%,-50%)跟定位一起使用的时候可以有居中的效果。至于为什么会居中，那时候就懒了，想丢给以后。今天自己琢磨了一会才发现我脑子没转过来！ 蓝色阴影还没有top：50%，left：50%。 为了更直观看出变化，又写多了一个div transform:translate(-50%,-50%) 意思：移动自己宽高的一半的距离，" - " 代表反方向。 不亲手试下，靠自己想还真有点懵，思维不如人，那就做记录！ ...
.turnjs-slider .thumbnail{ width:115px; height:85px; position:absolute; background:rgba(0,0,0, 0.5); z-index:10000; top:-100px; left:-17px; display:none; -webkit-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1); -webkit-transition:-webkit-transform 0.2s; -webkit-border-radius:5px; -moz-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1); -moz-transition:-moz-transform 0.2s; -moz-border-radius:5px; -o-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1); -o-transition:-o-transform 0.2s; -o-border-radius:5px; -ms-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1); -ms-transition:-ms-transform 0.2s; -ms-border-radius:5px; transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1); transition:transform 0.2s; border-radius:5px; }
最新发布
07-17
这段 CSS 代码定义了一个名为 `.turnjs-slider .thumbnail` 的样式规则，用于设置一个缩略图的样式。下面是对这段代码的解释： ```css .turnjs-slider .thumbnail { width: 115px; height: 85px; position: absolute; background: rgba(0, 0, 0, 0.5); z-index: 10000; top: -100px; left: -17px; display: none; -webkit-transform: translate3d(0px, 50px, 0px) scale(0.1, 0.1); -webkit-transition: -webkit-transform 0.2s; -webkit-border-radius: 5px; -moz-transform: translate3d(0px, 50px, 0px) scale(0.1, 0.1); -moz-transition: -moz-transform 0.2s; -moz-border-radius: 5px; -o-transform: translate3d(0px, 50px, 0px) scale(0.1, 0.1); -o-transition: -o-transform 0.2s; -o-border-radius: 5px; -ms-transform: translate3d(0px, 50px, 0px) scale(0.1, 0.1); -ms-transition: -ms-transform 0.2s; -ms-border-radius: 5px; transform: translate3d(0px, 50px, 0px) scale(0.1, 0.1); transition: transform 0.2s; border-radius: 5px; } ``` 具体解释如下： - `width: 115px;` 和 `height: 85px;` 设置了缩略图的宽度和高度。 - `position: absolute;` 将缩略图的定位方式设置为绝对定位。 - `background: rgba(0, 0, 0, 0.5);` 设置了缩略图的背景颜色为半透明的黑色。 - `z-index: 10000;` 设置了缩略图的层级，使其位于其他元素之上。 - `top: -100px;` 和 `left: -17px;` 将缩略图的位置设置为距离父元素顶部和左侧的偏移量。 - `display: none;` 初始状态下将缩略图隐藏。 - `-webkit-transform`, `-webkit-transition`, `-webkit-border-radius` 等属性用于定义 Webkit 浏览器（如 Chrome 和 Safari）下的过渡和变换效果。 - `-moz-transform`, `-moz-transition`, `-moz-border-radius` 等属性用于定义 Firefox 浏览器下的过渡和变换效果。 - `-o-transform`, `-o-transition`, `-o-border-radius` 等属性用于定义 Opera 浏览器下的过渡和变换效果。 - `-ms-transform`, `-ms-transition`, `-ms-border-radius` 等属性用于定义 Internet Explorer 浏览器下的过渡和变换效果。 - `transform`, `transition`, `border-radius` 等属性用于定义其他浏览器下的过渡和变换效果。 这段代码通过设置缩略图的样式，包括尺寸、位置、背景颜色以及过渡效果等，使其具有一定的自定义外观和动画效果。请注意，这段代码可能是为特定的 HTML 结构和功能设计的，如果你要使用它，请确保正确地应用到相应的 HTML 元素上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值