精华内容
下载资源
问答
  • 鼠标经过时,元素整体放大,代码如下: .tc>div>ul>li { display: inline-block; vertical-align: top; width: 295px; height: auto; margin: 0 20px 18px 0; background: white; box-...

    鼠标经过时,元素整体放大,代码如下:

    .tc>div>ul>li {
        display: inline-block;
        vertical-align: top;
        width: 295px;
        height: auto;
        margin: 0 20px 18px 0;
        background: white;
        box-sizing: border-box;
        transition: all .5s;
        -webkit-transition: all .5s; /* Safari */
    }
    .tc>div>ul>li:hover {
        cursor: pointer;
        transform: scale(1.1);
        -ms-transform:scale(1.1);     /* IE 9 */
        -moz-transform:scale(1.1);     /* Firefox */
        -webkit-transform:scale(1.1); /* Safari 和 Chrome */
        -o-transform:scale(1.1);
    }

    HTML 代码结构如下:

    <div class="tc mld">
            <h5><span>辅导班</span><small></small></h5>
            <div>
                <ul>
                    <li οnclick="window.open('video.html')">
                        <small></small>
                        <a href="#">数量上课</a><em>¥800.00</em><span>已售:<i>5</i>件</span></li>
                    <li οnclick="window.open('video.html')">
                        <small></small>
                        <a href="#">辅导班</a><em>¥800.00</em><span>已售:<i>5</i>件</span></li>
                    <li οnclick="window.open('video.html')">
                        <small></small>
                        <a href="#">辅导班</a><em>¥800.00</em><span>已售:<i>5</i>件</span></li>
                    <li οnclick="window.open('video.html')">
                        <small></small>
                        <a href="#">辅导班</a><em>¥800.00</em><span>已售:<i>5</i>件</span></li>
                </ul>
            </div>
            <span><a href="#">更多课程>></a></span>
        </div>

     

    转载于:https://www.cnblogs.com/zxn-9588/p/7423521.html

    展开全文
  • CSS Transform让百分比宽高布局元素水平垂直居中 很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用...

    CSS Transform让百分比宽高布局元素水平垂直居中

    center-percent-layout

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;margin-top:-50px这样的写法。但如果这个元素的宽高是用百分比表示呢?

    如果使用百分比来设置宽高的话,以前哪个负值方法已经用不上了,这个我们发现在一个小的窍门,就是使用CSS3中的transform的translate转换属性。下面来看代码实例:

    HTML代码

    <div class="center">您可以尝试改变浏览器大小,这个元素依然是水平垂直居中的哦!</div>
    

    CSS代码

    .center{
    position: absolute;
    top: 50%;
    left: 50%;
    width:50%;
    height:30%;
    padding:20px;
    text-align:center;
    background:#393;
    color:#fff;
    transform: translate(-50%, -50%);
    }
    

    查看演示

    如果你直接复制代码无法使用,请添加-webkit-transform或-moz-transform前缀,案例中我使用了-prefix-free这个插件,插件作用就是不需要输入-moz-和-webkit-这些前缀。

    展开全文
  • 接上面的一个功能需求做的一个demo:学生提交的答案图片老师也需要在一体机上批改,考虑到实际应用效果,答案显示如果在一体机靠上边,部分老师够不到(0.0),然后就...这次改成了用css3实现了,效果不错,记录一下。...

    接上面的一个功能需求做的一个demo:学生提交的答案图片老师也需要在一体机上批改,考虑到实际应用效果,答案显示如果在一体机靠上边,部分老师够不到(0.0),然后就需要旋转画板放大和缩小,这里其实就是跟放大图片效果差不多的,但是我之前的方法是老师每操作一次放大缩小,我就重新绘制canvas,得到的结果是放大缩小的次数越多,图片清晰度直线下降,所以不行。这次改成了用css3实现了,效果不错,记录一下。

    css部分:

    *{margin:0;padding:0;}
    		body{background: #CCCCCC;overflow: hidden;}
    		.caozuo{position: absolute;right: 0;top: 0;z-index: 100;width:201px;height:300px;
    			border:1px solid #fff;margin: 20px 20px 0 0;}
    		.classCanvas01{border:1px solid #333;position:absolute;z-index: 2;}
    		.classCanvas02{border:1px solid #333;position:absolute;z-index: 1;transform: scale(1);}
    		.jindudiv{width:201px;height:50px;background: #EEEEEE;position: relative;overflow: hidden;
    			text-align: center;}
    		.jindudiv .span1{float: left;}
    		.jindudiv .span2{float: right;}
    		.jindudiv .stron{}
    		.jindutiao{width:201px;height:20px;background: #E4B9B9;position: absolute;bottom:10px;
    			left:0px;z-index: 2;}
    		.jindutiao .tiaos{width:0;height:0;position: absolute;left:95px;top:20px;
    			border-left: 5px solid transparent;border-right: 5px solid transparent;
        		border-bottom: 10px solid red;}
        	.xuanzhuantiao{width:201px;height:20px;background: #E4B9B9;position: absolute;bottom:10px;
    			left:0px;z-index: 2;}
    		.xuanzhuantiao .tiaos{width:0;height:0;position: absolute;left:-5px;top:20px;
    			border-left: 5px solid transparent;border-right: 5px solid transparent;
        		border-bottom: 10px solid red;}
        	.lantiao1,.lantiao2{width: 201px;height: 10px;background: transparent;position: absolute;
        		bottom: -10px;left: 0px;z-index: 2;}

    html部分:

    <div class="caozuo" id="caozuo">
    		<button onclick="loadImg()">加载图片</button>
    		<button onclick="saveImg()">保存图片</button>
    		<br />
    		<button onclick="huanYuan()">还原操作</button>
    		<button onclick="huaChange(this)">橡皮</button>
    		<br />
    		<div class="jindudiv">
    			<span class="span1" id="suo">缩小</span>
    			<strong class="stron"><strong id="beishu">0</strong>%</strong>
    			<span class="span2" id="dal">放大</span>
    			<div class="jindutiao" id="jindutiao">
    				<div id="btnDa" class="tiaos"></div>
    				<div class="lantiao1"></div>
    			</div>
    		</div>
    		<br />
    		<div class="jindudiv">
    			<span class="span1">顺时针旋转</span>
    			<strong class="stron" style="float: right;"><strong id="dushu">0</strong>°</strong>
    			<div class="xuanzhuantiao" id="jinduzhuan">
    				<div id="btnZhuan" class="tiaos"></div>
    				<div class="lantiao2"></div>
    			</div>
    		</div>
    		<br />
    		<input type="color" name="color" id="color" onchange="changeColor()" /><span id="colorInfo"></span>
    	</div>
    	<div id="pingyi">
    		<canvas id="idCanvas02" class="classCanvas02" width="800px" height="500px"></canvas>
    		<canvas id="idCanvas01" class="classCanvas01" width="800px" height="500px"></canvas>
    	</div>
    	
    	<img id="tupian" />

    JavaScript部分:

    var canvas1,canvas2,ctx,ctx2,lastX,lastY,daxiaozhi="scale(1)",xuanzhuanzhi="rotateZ(0deg)";
    	var startHua=false,isHua=false;
    	var color,colorInfo;
    	var marginLefts,marginTops;
    	function go(){
    		var w = document.documentElement.clientWidth;
    		var h = document.documentElement.clientHeight;
    		marginLefts = parseInt(w-canvas1.width)/2;
    		marginTops = parseInt(h-canvas1.height)/2;
    		canvas1.style.left = marginLefts+'px';
    		canvas2.style.left = marginLefts+'px';
    		canvas1.style.top = marginTops+'px';
    		canvas2.style.top = marginTops+'px';
    	}
    	window.onload = function(){
    		canvas2 = document.getElementById("idCanvas02");
    		canvas1 = document.getElementById("idCanvas01");
    		ctx = canvas1.getContext("2d");
    //		ctx.fillStyle="rgba(61,135,245)";
    //		ctx.fillRect(0,0,350,375);
    		go();
    		
    		color = document.getElementById("color");
    		colorInfo = document.getElementById("colorInfo");
    		colorInfo.style.color = color.value;
    		colorInfo.innerHTML = color.value;
    		
    		function isTouch(event) {
    			var type = event.type;
    			//console.log(type);
    			if(type.indexOf('touch') >= 0) {
    				return true;
    			} else {
    				return false;
    			}
    		}
    		function start(){
    			var e = window.event||event;
    			e.preventDefault();
    			if(isTouch(e)) {
    				lastX = e.touches[0].pageX-marginLefts;
    				lastY = e.touches[0].pageY-marginTops;
    				//console.log("手机"+x+",,,"+y);
    			}else{
    				lastX = e.offsetX;
    				lastY = e.offsetY;
    			}
    			startHua = true;
    			
    			hua();
    		}
    		function hua(){
    			var e = window.event||event;
    			e.preventDefault();
    			if(startHua&&!isHua){//画笔
    				ctx.beginPath();
    				ctx.lineCap="round";
    				ctx.lineWidth = 5;
    				ctx.strokeStyle = colorInfo.innerHTML;
    				ctx.moveTo(lastX, lastY);
    				var nowX = e.offsetX?e.offsetX:parseFloat(e.touches[0].pageX-marginLefts);//这里奇怪,直接计算的值是NaN
    				var nowY = e.offsetY?e.offsetY:parseFloat(e.touches[0].pageY-marginTops);
    				ctx.lineTo(nowX, nowY);
    				//console.log("现在的:"+e.touches[0].pageX-marginLefts);
    				//console.log("现在的:"+parseFloat(e.touches[0].pageX-marginLefts));
    				ctx.stroke();
    				
    				lastX = nowX;
    				lastY = nowY;
    			}else if(startHua&&isHua){//橡皮
    				//ctx.lineCap="round";
    				//console.log(e.offsetX+"=="+e.offsetY);
    				ctx.clearRect(e.offsetX?e.offsetX:e.touches[0].pageX-marginLefts, e.offsetY?e.offsetY:e.touches[0].pageY-marginTops, 5, 5);
    			}
    		}
    		function end(){
    			var e = window.event||event;
    			e.preventDefault();
    			startHua = false;
    		}
    		
    		canvas1.onmousedown = start;
    		canvas1.onmousemove = hua;
    		canvas1.onmouseup = end;
    		canvas1.addEventListener('touchstart', start, false);
    		canvas1.addEventListener('touchmove', hua, false);
    		canvas1.addEventListener('touchend', end, false);
    		
    		//放大 缩小  start
    		var daBtn = document.getElementById("btnDa");
    		var jindu = document.getElementById("jindutiao");
    		var beisu = document.getElementById("beishu");
    		var suo = document.getElementById("suo");
    		var dal = document.getElementById("dal");
    		var kaile = false;
    		function kais(){
    			var event = window.event||event;
    			event.preventDefault();
    			kaile = true;
    		}
    		function moblie(){
    			var event = window.event||event;
    			event.preventDefault();
    			if(kaile){
    				var weizhi = parseInt(event.offsetX);
    				if(weizhi == 100){
    					beisu.innerHTML = 0;
    					daBtn.style.left = '95px';
    					suo.style.color = "#000";
    					dal.style.color = "#000";
    					canvas1.style.transform = "scale(1)"+" "+xuanzhuanzhi;
    					canvas2.style.transform = "scale(1)"+" "+xuanzhuanzhi;
    				}else if(weizhi < 100){
    					beisu.innerHTML = 100-weizhi;
    					daBtn.style.left = weizhi-5+'px';
    					suo.style.color = "#FF0000";
    					dal.style.color = "#000";
    					xiao(100-weizhi);
    				}else if(weizhi > 100){
    					beisu.innerHTML = weizhi-100;
    					daBtn.style.left = weizhi-5+'px';
    					suo.style.color = "#000";
    					dal.style.color = "#FF0000";
    					dada(weizhi-100);
    				}
    			}
    		}
    		function quites(){
    			var event = window.event||event;
    			event.preventDefault();
    			kaile = false;
    		}
    		jindu.onmousedown = kais;
    		jindu.onmousemove = moblie;
    		jindu.onmouseup = quites;
    		jindu.addEventListener('touchstart', kais, false);
    		jindu.addEventListener('touchmove', moblie, false);
    		jindu.addEventListener('touchend', quites, false);
    		//放大 缩小  end
    		
    		
    		//顺时针旋转  start
    		var btnz = document.getElementById("btnZhuan");
    		var zhuant = document.getElementById("jinduzhuan");
    		var dushu = document.getElementById("dushu");
    		var zhuanle = false;
    		function kaiset(){
    			var event = window.event||event;
    			event.preventDefault();
    			zhuanle = true;
    		}
    		function mobliet(){
    			var event = window.event||event;
    			event.preventDefault();
    			if(zhuanle){
    				var weizhi = parseInt(event.offsetX);
    				console.log(weizhi);
    				btnz.style.left = weizhi-5+'px';
    				weizhi = parseInt((360/200)*weizhi);
    				dushu.innerHTML = weizhi;
    				shun(weizhi);
    			}
    		}
    		function quiteset(){
    			var event = window.event||event;
    			event.preventDefault();
    			zhuanle = false;
    		}
    		zhuant.onmousedown = kaiset;
    		zhuant.onmousemove = mobliet;
    		zhuant.onmouseup = quiteset;
    		zhuant.addEventListener('touchstart', kaiset, false);
    		zhuant.addEventListener('touchmove', mobliet, false);
    		zhuant.addEventListener('touchend', quiteset, false);
    		//顺时针旋转  end
    		
    		document.getElementById("caozuo").onmouseout = function(){
    			quiteset();quites();
    		}
    	}
    	
    	function huaChange(a){
    		if(isHua){
    			isHua = false;
    			a.innerHTML = '橡皮';
    		}else{
    			isHua = true;
    			a.innerHTML = '画笔';
    		}
    	}
    	window.onresize = go;
    	
    	function changeColor(){
    		colorInfo.style.color = color.value;
    		colorInfo.innerHTML = color.value;
    	}
    	
    	function dada(weizhi){
    		//transform: scale(1);
    		canvas1.style.transform = "scale("+(1+(weizhi/100))+")"+" "+xuanzhuanzhi;
    		canvas2.style.transform = "scale("+(1+(weizhi/100))+")"+" "+xuanzhuanzhi;
    		daxiaozhi = "scale("+(1+(weizhi/100))+")";
    	}
    	
    	function xiao(weizhi){
    		canvas1.style.transform = "scale("+(1-(weizhi/100))+")"+" "+xuanzhuanzhi;
    		canvas2.style.transform = "scale("+(1-(weizhi/100))+")"+" "+xuanzhuanzhi;
    		daxiaozhi = "scale("+(1+(weizhi/100))+")";
    	}
    	
    	function shun(weizhi){//  rotateZ(0deg)
    		canvas1.style.transform = daxiaozhi+" rotateZ("+weizhi+"deg)";
    		canvas2.style.transform = daxiaozhi+" rotateZ("+weizhi+"deg)";
    		xuanzhuanzhi = " rotateZ("+weizhi+"deg)";
    	}
    	
    	function huanYuan(){
    		canvas1.style.transform = "scale(1) rotateZ(0deg)";
    		canvas2.style.transform = "scale(1) rotateZ(0deg)";
    		daxiaozhi = "scale(1)";
    		xuanzhuanzhi = " rotateZ(0deg)";
    		dushu.innerHTML = 0;
    		beisu.innerHTML = 0;
    		daBtn.style.left = '95px';
    		suo.style.color = "#000";
    		dal.style.color = "#000";
    	}
    	
    	function loadImg(){
    		//加载图片到第二层canvas(id为idCanvas02)上面
    		var imgSrc = new Image();
    		imgSrc.src = 'index1.png';
    		imgSrc.width = '800px';
    		canvas2 = document.getElementById("idCanvas02");
    		ctx2 = canvas2.getContext("2d");
    		ctx2.drawImage(imgSrc, 0, 0, 800, 500);
    	}
    	
    	function saveImg(){
    		//保存图片的时候要把画的笔画贴到第二层canvas(id为idCanvas02)上,在生成base64
    		canvas2 = document.getElementById("idCanvas02");
    		ctx2 = canvas2.getContext("2d");
    		ctx2.drawImage(canvas1, 0, 0, 800, 500);
    		//base64
    		var dataUrl = canvas2.toDataURL();
    		document.getElementById("tupian").src = dataUrl;
    	}

    大概的实现就是这样,class="caozuo"的div到时候放到实际项目的菜单中去,id="pingyi"的div放到大的显示容器中,也要使用绝对定位,不过这里要监听一体机的十点触控,判断老师是在上面画写还是想移动画布整体的位置。

    展开全文
  • transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 405px; background-color: #ffffff; height: 226px; -webkit-box-shadow: 0 0 2em #5191f1; -moz-box-sh
  • css3转换transform 移动旋转缩放 ###transformCSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲...

    css3转换transform 移动旋转缩放

    ###transform

    CSS3transform主要包括以下几种:旋转rotate扭曲skew缩放scale移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate

    1.rotate、scale、translate、skew

    • 旋转 依次为 z轴、z轴 、x轴 、y轴
      rotate(30deg) rotateZ(30deg) rotateX(30deg) rotateY(30deg)
    • 缩放 依次为 x方向y方向、x方向、y方向
      scale: scale(1.2,0.8) scaleX(1.2) scaleY(0.8)
    • 位移 依次为 x方向y方向、x方向、y方向
      translate(20px,-30px) translateX(20px) translateY(-30px)
      -扭曲 依次为 x轴y轴、x轴、y轴
      skew(anglex,angley) skewX(angle) skewY(angle)
      演示
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>CSS3转换</title>
       <style>
           body {
               margin: 0;
               padding: 0;
               font-family: '微软雅黑';
               background-color: #F7F7F7;
           }
    
           .wrapper {
               width: 1024px;
               margin: 0 auto;
           }
    
           .wrapper > section {
               width:100px;
               height:100px;
               margin-bottom: 20px;
               box-shadow: 1px 1px 4px #DDD;
               background-color: #FFF;
               float:left;
               margin-right:20px;
           }
           section > .wrap-box {
               position:relative;
           }
           section > header {
               margin-bottom:20px;
           }
           .oldbox {
               width:50px;
               height:50px;
               position:absolute;
               top:0;
               left:50%;
               margin-left:-25px;
               border:1px dashed red;
               z-index:2;
               box-sizing:border-box;
           }
           .box {
               width: 50px;
               height: 50px;
               background-color: yellow;
               margin:0 auto;
               position:absolute;
               top:0;
               left:50%;
               margin-left:-25px;
               z-index: 1;
           }
           .rotate .box {
               transform:rotate(275deg) translate(0px,10px) scale(1.2);
           }
           .rotate1 .box {
               transform:rotate(-45deg);
           }
           .scale .box {
               transform:scale(0.5);
           }
           .scale1 .box {
               transform:scale(0.5,1.2);
           }
           .translate .box {
               transform:translateX(-30px);
           }
           .translate1 .box {
               transform:translate(20px,20px);
           }
           .skew .box {
               transform:skew(45deg);
           }
           .skew1 .box {
               transform:skew(20deg,20deg);
           }
       </style>
    </head>
    <body>
    <div class="wrapper">
       <header>CSS3-转换</header>
       <section class="rotate">
           <header>旋转0</header>
           <div class="wrap-box">
               <div class="oldbox"></div>
               <div class="box"></div>
           </div>
       </section>
       <section class="rotate1">
           <header>旋转1</header>
           <div class="wrap-box">
               <div class="oldbox"></div>
               <div class="box"></div>
           </div>
       </section>
       <section class="scale">
           <header>缩放0</header>
           <div class="wrap-box">
               <div class="oldbox"></div>
               <div class="box"></div>
           </div>
       </section>
       <section class="scale1">
           <header>缩放1</header>
           <div class="wrap-box">
               <div class="oldbox"></div>
               <div class="box"></div>
           </div>
       </section>
       <section class="translate">
           <header>移动0</header>
           <div class="wrap-box">
               <div class="oldbox"></div>
               <div class="box"></div>
           </div>
       </section>
       <section class="translate1">
           <header>移动1</header>
           <div class="wrap-box">
               <div class="oldbox"></div>
               <div class="box"></div>
           </div>
       </section>
       <section class="skew">
           <header>倾斜0</header>
           <div class="wrap-box">
               <div class="oldbox"></div>
               <div class="box"></div>
           </div>
       </section>
       <section class="skew1">
           <header>倾斜1</header>
           <div class="wrap-box">
               <div class="oldbox"></div>
               <div class="box"></div>
           </div>
       </section>
    </div>
    </body>
    </html>
    

    image.png

    ###2.transform-origin

    • transform-origin 属性用来设置 transform 变换的基点位置。默认情况下,基点位置为元素的中心点。
      语法:
      `
      transform-origin: x-axis y-axis z-axis

    `

    名称描述
    x-axis位置(left、center、right)/ 百分数 / 数值x轴
    y-axis位置(top、center、bottom)/ 百分数 / 数值y轴基点坐标
    z-axis数值z轴基点坐标

    案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3转换</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                font-family: '微软雅黑';
                background-color: #F7F7F7;
            }
            .wrapper {
                width: 1024px;
                margin: 0 auto;
            }
            .wrapper > section {
                width:100px;
                height:100px;
                margin-bottom: 20px;
                box-shadow: 1px 1px 4px #DDD;
                background-color: #FFF;
                float:left;
                margin-right:20px;
            }
            section > .wrap-box {
                position:relative;
            }
            section > header {
                margin-bottom:20px;
            }
            .oldbox {
                width:50px;
                height:50px;
                position:absolute;
                top:0;
                left:50%;
                margin-left:-25px;
                border:1px dashed red;
                z-index:2;
                box-sizing:border-box;
            }
            .box {
                width: 50px;
                height: 50px;
                background-color: yellow;
                margin:0 auto;
                position:absolute;
                top:0;
                left:50%;
                margin-left:-25px;
                z-index: 1;
            }
            .rotate .box {
                transform-origin:center center;
                transform:rotate(45deg);
            }
            .rotate1 .box {
                transform-origin:right bottom;
                transform:rotate(45deg);
            }
            .rotate2 .box {
                transform-origin:50% 50%;
                transform:rotate(45deg);
            }
            .rotate3 .box {
                transform-origin:100% 100%;
                transform:rotate(45deg);
            }
            .rotate4 .box {
                transform-origin:25px 25px;
                transform:rotate(45deg);
            }
            .rotate5 .box {
                transform-origin:50px 50px;
                transform:rotate(45deg);
            }
        </style>
    </head>
    <body>
    <div class="wrapper">
        <header>CSS3-转换</header>
        <section class="rotate">
            <header>旋转0</header>
            <div class="wrap-box">
                <div class="oldbox"></div>
                <div class="box"></div>
            </div>
        </section>
        <section class="rotate1">
            <header>旋转1</header>
            <div class="wrap-box">
                <div class="oldbox"></div>
                <div class="box"></div>
            </div>
        </section>
        <section class="rotate2">
            <header>缩放2</header>
            <div class="wrap-box">
                <div class="oldbox"></div>
                <div class="box"></div>
            </div>
        </section>
        <section class="rotate3">
            <header>缩放3</header>
            <div class="wrap-box">
                <div class="oldbox"></div>
                <div class="box"></div>
            </div>
        </section>
        <section class="rotate4">
            <header>移动4</header>
            <div class="wrap-box">
                <div class="oldbox"></div>
                <div class="box"></div>
            </div>
        </section>
        <section class="rotate5">
            <header>移动5</header>
            <div class="wrap-box">
                <div class="oldbox"></div>
                <div class="box"></div>
            </div>
        </section>
    </div>
    </body>
    </html>
    

    效果

    image.png

    展开全文
  • 主要介绍了css3的transform中scale缩放的使用方法,需要的朋友可以参考下
  • css3缩放 transform: scale() 使用缩放之后顶点对齐问题

    万次阅读 多人点赞 2019-06-13 09:53:37
    css3缩放 transform: scale() 使用缩放之后顶点对齐问题 注意点:想要将缩放之后的div对齐顶点,那么需要将css属性设置为:transform-origin: 0 0 <div style="width: 900px; height: 900px; background: gray...
  • CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡,transition呈现的是一种过渡,是一种动画转换过程,如渐显、渐弱、动画快慢等。transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间;...
  • CSS transform属性

    2020-03-30 21:52:10
    1.transform字面的意思就是变形的意思,在CSS3中,transform支持的几个操作有旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 二,transform各操作使用介绍 1.rotate(deg) :rotate以中心为...
  • 碰到一个问题,在vue项目中引入animate.css来实现过渡动画,然而出现了一些怪异的问题。发生的问题如图所示该图出现的问题为节点的位置和尺寸都是按比例为1:1时的状态,而非当前尺寸和位置该图出现的问题真不知道...
  • /*for firefox*/-moz-transform:translate(100px) rotate(35deg);-moz-transform-origin:40% 100%;/*for chrome,safari*/-webkit-transform:translate(100px) rotate(35deg);-webkit-transform-origin:40% 100%;} ...
  • 让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了 <body> <div class="center"> ....
  • 方法1: 使用flex布局,居中元素;(推荐) 方法2: transfrom:translate(calc(-50%+ 0.5px),calc(-50% + 0.5px)); 用calc函数;
  • CSS3 transform 缩放

    2021-08-04 07:03:46
    1、transform:scale(x,y)这是一个缩放的transform属性,y值可以省略,如果y值省略的话,那默认就和x值一样。举例:div{width:300px;height:300px;background-color:#1B9AF7;border-radius:10px;position:absolute;...
  • CSS3transform属性详解

    万次阅读 2019-05-17 21:43:30
    Transform字面上就是变形,改变的意思。...下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧。 语法: transform ...
  • 这是一款使用css3 transform属性制作的3d电影海报效果。这段3d旋转电影海报代码的阴影效果十分完美,当鼠标移到海报上时,海报旋转到侧面的电影介绍,效果十分震撼。
  • 概念Transform字面意思...在css3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。语法transform: rotate | scale | skew | translate | matrix;注意:表示一个或...
  • transform: scale();缩放在IE浏览器下会有抖动transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转如:transform: scale(1.2);换成:transform: scale(1.2) rotate(0.1deg);transform:translate();偏移...
  • CSS3 transform

    2016-11-27 16:44:42
    Transform字面上就是变形,改变的意思。...下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧。 语法: tra
  • transform放大案例

    2020-08-01 09:17:13
    效果 鼠标放上去放大 html代码 css代码 使用scale最大的好处是不会影响其他盒子的布局
  • css3-12 transform:scale(1.2,1.2)实现移入元素变大特效一、总结一句话总结:transform:scale(1.2,1.2)鼠标移入的时候变大一点点,超出边框的部分隐藏掉。1、如何设计出好看的动态效果?去别人网站参考记得把功能写...
  • doctype htmlhtml lang=enhead meta charset=UTF-8 titleDocument/title style /*如果使用的不是webkit浏览器 请将代码中的注释都去掉就可以看到效果*/ @-webkit-keyframes clockwiseRotate{ to { transform:rotate...
  • css 字体大小 transform

    2021-05-10 16:42:50
    -webkit-transform 的含义 -webkit 是表示针对 safari 浏览器支持,-ms表示针对 IE 浏览器支持。 如下表示的是在 X 轴向右移动 50px, Y 轴向下移动 100px。 div { -ms-transform: translate(50px, 100px); -...
  • 首先讲一下自己对transform scale 的理解,transform scale 放大元素,元素本身的width与height不变,并不会影响页面布局,相当于是在元素上添加了一个放大镜。本质上是放大像素点,所以当放大图片时图片会出现...
  • 给抖动的元素添加样式: transform: perspective(1px);
  • css transform导致字体像素模糊的问题解决办法 通过 transform:translate(X,Y) 偏移元素达到定位的效果,但是相继出现的是,如果元素内部有字体的话,会出现模糊的问题,因此也通过网上的查阅,统一整理一下多种解决...
  • transform: translate(500px,100px) rotate(45deg); /* translate(500px,100px)表示相对于原来位置的偏移 (相当于relative 还霸占着原来的位置) */ transform-origin: center bottom; /* 旋转中心 */ /* 放大...
  • 因为 bscroll / iscroll 是基于 transform 属性实现滚动的, 所以 iscroll 会通过实时修改元素的 transform 属性以达到滚动的效果。父元素如果存在 transform 属性,子元素的 position: fixed 属性无效 参考资料 ...
  • Css移动位置使用transform与方位top改变的性能区别 .box{ width: 100px; height: 100px; border: 1px solid red; position: relative; } //css样式 1.使用top修改 setTimeout(function () { $('.box').css('...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,060
精华内容 5,624
热门标签
关键字:

csstransform放大