精华内容
下载资源
问答
  • transform放大案例

    2020-08-01 09:17:13
    效果 鼠标放上去放大 html代码 css代码 使用scale最大的好处是不会影响其他盒子的布局

    效果

    鼠标放上去放大
    在这里插入图片描述

    html代码

    在这里插入图片描述

    css代码

    在这里插入图片描述
    使用scale最大的好处是不会影响其他盒子的布局

    展开全文
  • 携程transform放大效果

    2017-09-15 20:39:00
    transform : scale(1.2) ; } style > head > < body > < div class ="img" > < img src ="https://dimg03.c-ctrip.com/images/100s0800000033z714C56_C_500_280.jpg" /> < span class...
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>携程tab</title>
            <style type="text/css">
                .img{
                    height: 110px;
                    width: 220px;
                    position: relative;
                    overflow: hidden;
                }
                .img img{
                    width: 220px;
                }
                .message{
                    background: url(http://pic.c-ctrip.com/platform/online/home/un_sprite_tag.png);
                    position: absolute;
                    top: 0;
                    left: 20px;
                    height: 41px;
                    width: 41px;
                    text-align: center;
                    color: white;
                    font-size: 14px;
                    padding-top: 5px;
                    /*overflow: hidden;*/
                    box-sizing: border-box;
                }
                .sell{
                    position: absolute;
                    bottom: 0;
                    background: rgba(0,0,0,0.5);
                    color: white;
                    width:100%;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                }
                .area{
                    width: 220px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 12px;
                }
                .img:hover img{
                    transform: scale(1.2);
                }
            </style>
        </head>
        <body>
            <div class="img">
                <img src="https://dimg03.c-ctrip.com/images/100s0800000033z714C56_C_500_280.jpg" />
                <span class="message">特卖</span>
                <div class="sell">超正航班,超级特卖</div>
            </div>
            <div class="area" title="巴厘岛5-6日4晚自由行(5钻)·库塔海滩零距离 五星万豪/喜来登 人气酒店">巴厘岛5-6日4晚自由行(5钻)·库塔海滩零距离 五星万豪/喜来登 人气酒店 </div>
        </body>
    </html>

     

    转载于:https://www.cnblogs.com/lhl66/p/7528316.html

    展开全文
  • 给抖动的元素添加样式: transform: perspective(1px);

    给抖动的元素添加样式:

    transform: perspective(1px);
    
    展开全文
  • 首先讲一下自己对transform scale 的理解,transform scale 放大元素,元素本身的width与height不变,并不会影响页面布局,相当于是在元素上添加了一个放大镜。本质上是放大像素点,所以当放大图片时图片会出现...

    首先讲一下自己对transform scale 的理解,transform scale 放大元素,元素本身的width与height不变,并不会影响页面布局,相当于是在元素上添加了一个放大镜。本质上是放大像素点,所以当放大图片时图片会出现模糊,这里也顺带提一下解决方案,当元素放大时去调用高清图片,不要一开始就加载大图,影响页面加载速度。

    使用transform默认的作用中心是元素的中心点,通过  ransform-origin  调整,transform-origin:0 0;    

    如果有需求不能改变中心点,可以在外层嵌套一层div,放大时同时对div进行transform matrix  偏移操作,在视觉上形成同样的效果。

    最后贴上demo代码,放大元素本身不放大,就在外层添加一个div控制它的宽高影响滚动条。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
            <script src="js/bootstrap.min.js"></script>
            <link href="css/bootstrap.min.css" rel="stylesheet" />
            <style>
                #btn{
                    margin: 200px 200px;
                    transform-origin:0 0;
                }
                #zoom-area{
                    width: 1024px;
                    height: 800px;
                    background-color: #2B542C;
                    position: relative;
                    padding: 1px;
                    overflow: scroll;
                    
                }
                #area{
                    border: 2px solid #761C19;
                }
            </style>
        </head>
        <body>
            <div id="zoom-area">
                <div id="area">
                    <div id="btn" style="border:20px solid #000;  background-color: #1E9FFF; width: 333px;height: 500px;line-height: 2;">啊你高啊啊阿斯顿</div>
                </div>

            </div>
            <div id="btn-big">放大</div>
            <script>
                var zoomTop=0
                var zoomLeft=0
                var size=1
                var w=$('#area').width()
                var h=$('#area').height()
                $('#btn-big').on('click',function(){
                    size+=0.5
                    if(size>1){    
                        //需要把边框的宽度也算上
                        zoomTop=($('#btn').height()+parseInt($('#btn').css('border-width'))*2)*(size-1)
                        zoomLeft=($('#btn').width()+parseInt($('#btn').css('border-width'))*2)*(size-1)
                        $('#area').width(w+zoomLeft)
                        $('#area').height(h+zoomTop)
                    }
                    $('#btn').css({'transform':'scale('+size+','+size+')',
                                    '-ms-transform':'scale('+size+','+size+')',
                                    '-moz-transform':'scale('+size+','+size+')',
                                    '-webkit-transform':'scale('+size+','+size+')'
                                })
                    
            })
            </script>
        </body>
    </html>

    如果有更好的解决方案欢迎补充

    展开全文
  • 放大缩小 步骤: 1、导入素材 拖button图片控件 设置控件属性为custom 取消自动布局 2、连线方法 3、同时修改frame或者bounds的宽度和高度 4、加入收尾动画 (这个不常用) - (IBAction)zoom:(UIButton *)...
  • 需求中有一个功能是,鼠标移入放大图片,我用的比较简单的方法,就是transform:scale(10),可是图片放大后会模糊 只需要加一个translateZ(0) 就可以解决了。 样式代码如下: .pushImg img:hover{ transform:...
  • 主要介绍了iOS图片放大的两种方式,transform方式放大图片,从中心开始放大,另一种用frame改变宽高,详细内容请参考下
  • 鼠标经过时,元素整体放大,代码如下: .tc>div>ul>li { display: inline-block; vertical-align: top; width: 295px; height: auto; margin: 0 20px 18px 0; background: white; box-...
  • transform : 盒子反转 和图片放大 学习笔记,也是方便以后查阅,欢迎友善探讨 详细的用法:https://www.w3school.com.cn/cssref/pr_transform.asp 这里记录在实际开发中用到较多的几个属性。 1.rotate旋转 transform...
  • /*img标签放大再缩小*/ img {  width: 400%;  transform: translate3d(-50%, -50%, 0) scale(0.25, 0.25);  -webkit-transform: translate3d(-50%, -50%, 0) scale(0.25, 0.25);  -moz-transform: translat...
  • C# WPF--Transform 实例下载 放大图形 源代码 说明见:http://blog.csdn.net/tianjing_1983/article/details/1548470
  • 接上面的一个功能需求做的一个demo:学生提交的答案图片老师也需要在一体机上批改,考虑到实际应用效果,答案显示如果在一体机靠上边,部分老师够不到(0.0),然后就需要旋转画板放大和缩小,这里其实就是跟放大图片...
  • transform

    2021-03-29 20:23:51
    transform 属性值: transform :scale 缩放 transform :translate 位移 transform : rotate 旋转 transform :skew 倾斜 ... 大于1表示放大,小于1表示缩小。 translate 位移 格式: transform:transla
  • img标签放大再缩小 img { width: 300%; transform: translate3d(-50%, -50%, 0) scale(0.33, 0.33); -webkit-transform: translate3d(-50%, -50%, 0) scale(0.33, 0.33); -moz-transform: translate3d(-50%, -...
  • ie8实现transform:scale放大效果

    千次阅读 2017-06-02 10:32:38
    .class{ filter: progid:DXImageTransform.Microsoft.Matrix(  M11=1.05,  M12=0,  M21=0,  M22=1.05,  SizingMethod='auto expand'); }
  • 使用css3的transform的scale属性,使图片放大后,再次在相同的位置上画点,此时,点的位置会偏移,我调试了一下,发现,放大后,点的相对位置的left和top值,和没有放大的时候的值是一样的,这样的话,我怎么能在...
  • OpenLayers引用ol-ext:Transform能够对Feature图形进行放大、缩小、移动、旋转、拉伸等操作,非常好用。 代码: transformFeature() { var _this = this if (this.transform !== null || this.transform !== '') ...
  • ---Transform---放大缩小旋转

    千次阅读 2015-11-25 22:05:41
    self.delta -= 20.0;  // CGAffineTransformMakeTranslation的位移形变是相对按钮"初始"位置来... self.iconButton.transform = CGAffineTransformMakeTranslation(0, self.delta);    // CGAffineTra
  • 【鼠标移动进去图片放大一倍效果:运用了-webkit-transform:scale(1.04)效果】</p> 如图:鼠标移动上去的时候图片放大一倍的效果, <!DOCTYPE ...
  • 原理:通过juery的position()或者offfet()方法获取...再放大后,目标标签距离父标签的距离被改变    var canvas = $("#the-canvas"); var el = document.getElementById('the-canvas'); var initSca...
  • @interface ViewController () - (IBAction)up; - (IBAction)big ; - (IBAction)leftRotate ; @property (nonatomic,assign)CGFloat ty; @end @implementation ViewController ...//向上移动,transform以...
  • // self.iconBtn.transform = CGAffineTransformTranslate(self.iconBtn.transform, 0, -30);   //2. 修改结构内容   // 2.1 判断 tag   NSInteger tag = sender. tag ;   switch (tag) { ...
  • 效果如下图所示: 代码如下图所示 var rectangle = new L.Rectangle(L.latLngBounds(this.... transform: true, fillColor: "transport", fillOpacity: 0 }).addTo(this.leafletService.map); th..

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 772
精华内容 308
关键字:

transform放大