css3新增样式属性transform，用translate居中显示

最新推荐文章于 2023-10-10 15:56:39 发布
最新推荐文章于 2023-10-10 15:56:39 发布
阅读量677 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky_girl_girl/article/details/104146760
版权

1.旋转 rotate（度数deg）
2.位移translate(x轴位移，y轴位移)
3.缩放scale（水平缩放值，垂直缩放值）
4.倾斜skew（度数deg）
3.translate使用于居中显示
方法一：父级position：relative
子级： position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;

<html>
<style>
  div{
	position:relative;
	width:200px;
	height:200px;
	background-color:skyblue;
  }
  .p1{
	position:absolute;
	width:100px;
	height:100px;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
	background-color:pink;
	transition:transform 1s;
	transform:rotate(45deg);
  }
  div:hover .p1{
	transform:rotate(360deg);
  }
</style>
<body>
	<div>
		<p class="p1"></p>
	</div>
</body>
</html>

方法二：
transform：translate（-50%，-50%）

在这里插入代码片
<html>
<style>
  div{
	position:relative;
	width:200px;
	height:200px;
	background-color:skyblue;
  }
  .p1{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:100px;
	height:100px;
	background-color:pink;
  }
</style>
<body>
	<div>
		<p class="p1"></p>
	</div>
</body>
</html>
lucky_girl_girl
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用transform：translate使div居中显示
丑小鸭变黑天鹅的博客
04-22 1414
利用transform：translate使div居中显示 之前一直在用这个属性让某个div居中显示，但是一直有一个困惑，我想同时让水平和垂直都居中，可是水平方向总会有一点偏差，看一下以前怎么写的。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { mar
居中，transform：translate(x,y)来设置居中
leixu1027的博客
10-18 1698
我在以前也写过margin和flex的博客，可以自行查看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ ...
translate()函数，水平垂直居中
weixin_58431406的博客
06-14 1655
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。
[css] translate实现水平垂直绝对居中
qq_14993591的博客
09-15 261
position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); 这种方法可以不用知道宽高 参考： https://www.cnblogs.com/luna666/p/9662173.html
css——利用translate让元素居中
叶落无痕的博客
08-30 1100
css——利用translate让元素居中 父元素： position: relative; 居中元素： position: absolute; top: 50%; //基于父元素 left: 50%; //基于父元素 transform: translate(-50%, -50%); //基于自身 注意：此方法可能会导致像素模糊问题，因为CSS 的 transform： translate 属性在作元素位移时，极有可能发生像素点无法对齐的情况。正常情况下，元素的边缘应该和像素..
CSS居中效果之transform的使用
09-25
3. **与其他`transform`样式冲突**：如果元素上还有其他`transform`属性，它们会与`translate(-50%, -50%)`一起应用。这可能会改变元素的最终位置，因此需要确保`translate(-50%, -50%)`是最后应用的`transform`。 ...
CSS3 3D位移translate效果实例介绍
09-27
总结起来，CSS3的3D位移`translate3d`是增强网页动态效果的重要工具，它提供了在X、Y、Z三个维度上对元素进行位移的能力，结合`perspective`和`transform-style`等属性，可以创建出具有深度和立体感的网页交互界面。...
css3块元素居中
04-10
在CSS3中，实现块元素的居中是一个常见的布局需求，尤其当涉及到页面设计与响应式布局时。根据所提供的文件信息，我们可以详细探讨几种在不同场景下实现块元素居中的方法，以及理解其中的原理。 ### 1. 内联元素...
css3鼠标经过突出显示详情特效特效代码
03-20
总的来说，这个CSS3鼠标经过突出显示特效代码利用了`:hover`伪类、`transform`和`transition`属性，创造出动态的、吸引人的视觉效果。通过不断探索和实践，开发者可以在此基础上创新，设计出更多个性化和有趣的交互...
用translate让盒子居中
google_SEO_yang的博客
01-16 308
<style> div{ position: relative; width: 500px; height: 500px; background-color: pink; } p{ position: absolute; top: 50%; left: 50%.
CSS居中之 { left:50%； top:50%； transform:translate(-50%,-50%)； }
kfepiza的博客
03-04 2107
也可以写成:用 translate 的必须是块级元素, 或者absolute,fixed 才会生效比如 translate 在 relative+inline 时不会起作用left 和 top 在 position:relative,absolute,fixed 才会生效所以position不能是static;display不能是inline,relative+inline 时, left和top起作用, translate不起作用。
利用translate()进行水平垂直居中
热门推荐
mr_fzz的博客
11-08 2万+
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中. 代码如下://html: <div class='wrap'> 我不知道宽高，但是我就是要水平垂直居中 </div>//css .wrap{ padding:10px; background:green; color:#fff; position:abso
Translate实现水平垂直绝对居中
weixin_30787531的博客
09-17 193
translate实现绝对居中效果。 translate一直是我实现居中效果众多属性中最多的一个属性，我认为这个属性简单，使用方便，在此小记。 translate(X,Y)定义2D转换，其中X是定义X轴的值，Y轴是定义Y轴的值。 　　　　　　 position: absolute; left: 50%; top: 50%; ...
利用translate进行上下居中，你会了吗？
阿小绿的博客
07-07 584
话不多说，先看效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>上下左右居中</title> <style type="text/css"> .box { wid
css实现垂直水平居中
renzhilongblog的博客
05-20 174
css实现垂直水平居中HTML:<div class="wrapper"> <div class="content"></div> </div>CSS:.wrapper { position:relative; width:500px; height:500px; background:#ddd; } .content { width:200px; heig
transform:translate(-50%,-50%)实现水平垂直居中
weixin_48181168的博客
07-10 339
translate()函数是css3的新特性. 在不知道自身宽高的情况下， 可以利用它来进行水平垂直居中.。 当使用：top:50%;left:50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴） 移动自身长宽的 50%，以使其居于中心位置。 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50...
CSS水平垂直居中的方法（Flex、Grid、translate、margin..）
最新发布
qq_44396859的博客
10-10 1002
其实网上还有一些神通广大的网友的方法能够实现，但由于代码量的问题或者副作用的问题较多，就不再赘述，本文介绍的以上几种方法按照顺序依次推荐。参考链接：元素水平垂直居中都有哪些方法 - 简书。
html transform优化,HTML Style transform用法及代码示例
weixin_39859128的博客
06-03 718
HTML DOM中的样式转换属性用于转换对象。 transform属性允许旋转，缩放，移动，倾斜元素等。它可以使用2D或3D转换。用法:它返回transform属性。object.style.transform它用于设置transform属性。object.style.transform = "none|transform-functions|initial|inherit"属性值：值描述none...
使用transform使定位元素居中
神膘护体小月半的博客
11-16 9081
1.1水平居中 下面举一个例子，父元素里面有一个子元素。 子元素相对于父元素定位时，如果不写left和top，默认定位在父元素的左上角。 子元素加上left:50%之后，此时的50%是指父元素宽度的50%，也就是100px，也就是子元素以它自己的左边为基准，平移了100px的距离。 因为是以子元素的左边为基准，不算是完全的水平居中，需要再让子元素向左平移一丢丢(子元素宽度一半的距离)。如果前期不知道子元素的宽度，就可以用transform的translate属性了。transfo..
css transform translate 自适应屏幕
08-16
要使CSS Transform的translate()函数自适应屏幕，你可以使用百分比单位或相对单位来定义平移的距离。这样，元素将相对于其容器进行移动，并在不同尺寸的屏幕上自动调整位置。 下面是一个示例，展示了如何使用CSS ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值