解决css中总以中心点缩放

最新推荐文章于 2024-07-10 10:04:49 发布
最新推荐文章于 2024-07-10 10:04:49 发布
阅读量1.5w 收藏 5
点赞数 3
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ivan_jq/article/details/105722906
版权

css中缩放是使用 transform来控制，参数可为scale、scaleX、scaleY等，但常规的缩放总以中心点为基准点，在很多时候都是很不方便的。
使用transform-origin来进行控制，使用transform-origin属性，可以改变缩放的基准点。

transform-origin: 10px 10px; // 定义缩放原点,相对于左上角的距离x、y，单位px
  • 参数可使用值
  1. 参数一：left、center、right，参数二：top、center、bottom。
  2. 具体的像素值；
ivan_jq
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现图片以中心缩放
just
02-08 4284
CSS图片以中心缩放、放大，超出隐藏 layui轮播图 <!-- 轮播图 --> <div class="layui-carousel wzg-carousel" id="test1"> <div carousel-item> <div><img src="../res/images/1.jpg" alt=""></div&g...
实现图片中心缩放
木槿花西月锦绣
11-13 6394
首先什么是中心缩放呢？相信大家都明白，就是以中心为原点放大图片。。。（感觉跟没说一样不过大家肯定都明白） 首先说一下用css3实现的方式： body{ background-color: #D3C7C7; } div{ width:300px; height:350px; margin:100px auto; } img{ cursor:point
CSS【详解】变换 transform（含位移 translate，缩放/翻转 scale，旋转 rotate，CSS 的角度单位，斜切skew，透视 perspective，变换类型和原点等）
最新发布
朝阳39的博客
07-10 1207
变换是缩放、位移、旋转、透视、斜切等的总称。
CSS3 2D转换之位移（translate)、旋转（rotate）、缩放（scale）以及设置旋转和缩放的中心点
蟹黄堡
05-16 6245
2D转换概述 2D转换可以实现元素的位移、旋转、缩放等效果。 2D转换的分类有：移动（translate），旋转（rotate），缩放（scale）。 2D转换之translate 2D移动translate可以改变元素在页面中的位置，类似定位。 移动tranlate的语法格式如下： transform: translate(x,y); transform: translateX(n); transform: translateY(n); 注意： 1、translate最大的优点是不会影响到其他元
css设置缩放中心点,JQuery控制图片由中心点逐渐放大效果
weixin_32657693的博客
08-03 1352
有的时候我们需要做一个当鼠标放置在图片上的时候，希望图片逐渐变大，即图片的width和height逐渐变大，但是此时，其left值与top值没有改变，故看似不是从中心点进行缩放的。如下图：从中心点进行缩放实现代码如下：#div1{ width:600px; height:400px; margin:50px auto; position:relative; text-align: center; ...
css scale 缩放基准点
solocao的专栏
10-09 2万+
使用transform-origin来进行控制 在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。 用法：transform-origin: 10px 10px; 共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离； ...
设置scale中心点_CSS3属性transform(旋转rotate缩放scale倾斜skew移动：translate)
weixin_39740272的博客
12-04 2531
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。二.缩放 scale用法：transform: scale(0.5) 或者 tran...
html网页缩小中心点设置,css3的transform中scale缩放详解
weixin_39760368的博客
06-03 2759
下面我们从3个方面开始介绍：1、scale(x,y) 对元素进行缩放X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。transform:scale(2,2.5);2、scaleX() 元素只在X轴(水平方向)缩放元素。默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点tr...
CSS实现鼠标悬停缩放
Growing up Or Growing old
04-14 1918
css3通过:hover选择器以及2D 转换来实现鼠标悬停放大效果
CSS实现图片以中心缩放 --- 20/03/18
HimeYui的博客
04-12 7902
CSS图片以中心缩放、放大，超出隐藏 HTML代码： <div> <img src="#"> </div> CSS代码： <style> .container{ width: 100%; overflow: hidden; position: relative; } .container im...
html以中心点缩放图片,关于canvas的scale缩放中心的问题
weixin_36448083的博客
05-31 1151
对小正方形进行2倍的放大，他的坐标也会被移动，怎样让它以本身的中心放大呢？向下面这样<!DOCTYPE html><head><meta charset="UTF-8"><title>Title</title></head><body><canvas id="mycanvas" width="400" hei...
CSS 变换 transform(位置 translate,缩放 scale,旋转 rotate,中心点 origin)
卋舉
10-12 2570
位置 transform:translate(100px); 宽高(缩放 scale) transform:scale(1.5,1.5); 旋转(旋转 rotate) transform:rotate(45deg); 控制中心点(原点 origin) transform-origin:150px 100px; 动画 (transition) transition:all .5s ease-in 0s; <!DOCTYPE html> <html lang="zh-CN"> <h
Openlayers 教程 27 - 获取地图中心点、范围以及缩放等级
linzi19900517的博客
08-30 1432
Openlayers 教程 - 获取地图中心点、范围以及缩放等级。
从中心放大
bin1813的博客
12-08 300
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> #div1{ width:100px; height: 100px; background: #ccc; posi
css3 缩放scale()方法
热门推荐
高先生的猫
06-01 4万+
一、scale()方法 缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。 跟translate()方法一样，缩放scale()方法也有3种情况： （1）scaleX(x)：元素仅水平方向缩放（X轴缩放）； （2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）； （3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）； 1、scaleX(x) 语法： transform:scaleX(x) 说明： x表
CSS3图片以中心缩放，放大超出隐藏实现
aizuo3784的博客
10-08 1009
<!--Html代码--> <div class="selfScale"> <img sr="#" /> </div>/*样式代码*/ .selfScale{//容器 cursor: pointer; width: 100%; overflow: hidden; position: relative;}.selfS...
view scale 的基准点的切换
weixin_33709219的博客
09-09 279
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
weixin_70320000的博客
02-16 1935
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
CSS3学习笔记
橘颂的博客
07-29 1133
学习笔记
css -webkit-transform 基于中心缩放
09-06
CSS中的-webkit-transform属性可以用于对元素进行旋转、缩放、平移和倾斜等变换效果。其中，基于中心缩放是一种常见的变换效果。 对于基于中心缩放，我们可以使用scale函数来实现。scale函数可以指定元素在水平方向和垂直方向进行缩放的比例，且默认以元素中心为中心点进行缩放。 例如，如果我们要将一个元素在水平方向缩小一半，可以使用如下的CSS样式： ```css .element { -webkit-transform: scale(0.5, 1); } ``` 这样，元素将以其中心为基准，水平方向上缩小到原来的一半。如果想要在垂直方向上缩小一半，可以将scale函数的第二个参数改为0.5。 值得注意的是，CSS中的-webkit-transform属性在某些浏览器中需要添加前缀-webkit-以实现最佳的兼容性。所以我们通常会写成-webkit-transform来使用。另外，还有其他的前缀用于不同的浏览器，如-moz-、-o-等。 总之，通过使用-webkit-transform属性的scale函数，我们可以实现元素的基于中心的缩放效果。这在实现一些动画效果或响应式布局中经常会用到。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值