2d转换-缩放

于 2021-11-29 14:42:18 发布
阅读量103 收藏
点赞数
分类专栏： html/css 文章标签： css3 css html
原文链接：https://blog.csdn.net/weixin_43392489/article/details/103647443
版权

scale(x,y)

            一个值的时候  xy都缩放

            两个值的时候 分别 x  和  y

举例

<!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>Document</title>
	<style>
		.wrap{
			width: 500px;
			height: 500px;
			background: pink;
			margin: 50px auto;
			border: 1px solid #333;
			/* padding-top: 1px; */
			
		}
		.box{
			width: 100px;
			height: 100px;
			background: yellow;
			margin: 150px auto;
			transition: 1s;	
		}
		.wrap:hover .box{
			transform: scale(2);
			transform: scale(2,3);
			transform: scaleX(2);
			transform: scaleX(2);
			transform: scale(.5);
			
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="box"></div>
	</div>
</body>
</html>

洋洋阳@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap4 Flex（弹性盒子）布局（怎么解决内容浮动）
wmeng13的博客
06-19 2745
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
html5随机圆不重叠,Js生成随机圆形，随机颜色，随机位置，不重叠
weixin_28696185的博客
06-02 1591
这篇文章主要是用来总结之前的那两篇文章的知识点，分别是《处理数组循环中删除元素导致索引错位情况》和《JavaScript规则图形碰撞原理》，还是用demo来总结来得实在，做了个生成随机圆形，随机颜色，随机位置，不重叠的小demo。demo的js代码如下:function creatDiv(r_w){var randomWidth=parseInt(Math.random()*r_w+50);var...
Css+Div画圆
zh89233的专栏
09-17 2108
Jxchen .box{ border:1px solid #f60; width:100px; height:100px; margin:0 auto; -webkit-border-radius:50px; -moz-border-radius:50px; -o-border-radius:50px; border-radius:50px; }
css横向排列和弹性盒子布局 display:flex
wulala_SpongeBob的博客
04-07 6878
编写css时，我们经常需要将元素横向排列在一行，通常由以下三种元素可以实现： 1、float ： 可以使用float偏移到一行，如：同时使用float:left即可偏移在同一行的左边，如下： 也可以一个模块使用float:right，一个模块使用float:left使一左一右排列，可以达到我们要求的效果，但是！！！有一个问题--------他们的父级模块会因为子模块的浮动而使主体没有高度。通俗来...
css3 图片变形再旋转，旋转底盘效果
@必意玲
01-13 2126
这里犯过一个错误，仍然对img设置transform属性，但是按照x轴变形的效果不会生效，这是因为有了两个transform作用于一个标签。步入主题，其实上面就是一个图片旋转底图，然后用的第三方图表工具（highcharts）做的3D饼状图。下面记录下这个圆盘旋转实现步骤，其实很简单，当初想复杂了，还用了什么倾斜。改变 imgRotate 从 0% 的 360° 就实现了逆时针旋转效果，之后，在实现对图片的变形。如果，将旋转动画加在父容器上面，变形样式放在img上面，则会出现下面的效果。
js实现随机圆与矩形功能
01-18
本文实例为大家分享了js实现随机圆与矩形功能的具体代码，供大家参考，具体内容如下 1、节点操作版 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>DOM节点操作版本</title> </head> <style> *{ margin: 0;padding: 0; } html,body,.box{ width: 100%;height: 1
css3学习之2D转换功能详解
09-27
众所周知在css3中出现了许多新的特性，其中2D转换我觉的非常有意思，通过它我们能够对元素进行移动、缩放、转动、拉长或者拉伸，所以希望在这里和大家分享一下。有需要的朋友们可以参考借鉴，下面来一起看看吧。
CSS渐变和2D转换
08-10
1、认识渐变和浏览器兼容 2、线性渐变 3、径向渐变 4、重复渐变 5、CSS3过渡Transition的用法 6、CSS3 2D转换Transform(位移，缩放，旋转，倾斜)的应用
CSS3 2D 转换
12-13
CSS3 2D 转换 #rotate2D,#rotate3D { width:80px; height:70px; color:white; position:relative;...font-weight:bold;...CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。 它是如何工作？ 转换的效果是让
将3D和2D MATLAB绘图转换为可缩放向量格式（SVG）
06-04
将3D和2D MATLAB绘图转换为可缩放向量格式（SVG）
javascript画直线和画圆的方法（非HTML5的方法）
XmlRequest的专栏
02-20 6527
无标题文档 div{ overflow:hidden;} /* 珠峰培训 2011年12月9日课堂示例 以下画点，画线，画圆的方法，都不是用HTML5的canvas，而是用的纯js 用到了一些数学的三角函数方法 以下代码是课堂随机写出，没有做更多优化 */ function point(x,y){//画点 var oDiv=document.createElement('div')
js canvas 绘制任意弧度的圆
m0_48488612的博客
08-17 483
canvas 绘制任意弧度圆 demo图 save和restore方法 ctx.strokeStyle = "red"; // 线条色为red // 使用save ctx.save(); // 局部属性,只在下一个restore之中有效 ctx.strokeStyle = "blue"; // 线条色为red ctx.restore(); // 在使用strokeStyle为red 代码 <!DOCTYPE html> <html lang="en"> <head&gt
实现div圆角的几种方式（有附件）
lgj346435400的专栏
11-03 1037
 由于IE9以下都不支持css3，当需求中有要实现圆角时到处找。这里我为大家总结一下几种方式。   一、使用图片和css的方式，这个种方式需要图片和css的配合，          缺点：灵活性不够，圆角的弧度不能任意变换，对于不熟悉ps的来说比较麻烦；优点：各个浏览器都兼容。         图片实现这个不是我今天要讨论的对象。   二、使用vml语言，在IE5以上支持。可是总不能为...
CSS实现科技感旋转底盘
ChuChuChuZzz的博客
09-09 1270
保持x轴旋转75度 以z轴为轴心，不断旋转 @keyframes mRotate{ 0% { transform: rotateX(75deg) rotateZ(0); } 100% { transform: rotateX(75deg) rotateZ(360deg); } } .app-base-img{ width: 100px; height: 100px; animation: mRotate 5s infinite li
今日P5.JS 互动图形 拖来拖去的小圆
youngerlily的博客
05-07 1193
Lily学P5.JS 设计尸怎么写网页？当然是借助大神写好的代码块来实现创意呀，爱上码绘之旅…… 傻乎乎的小圆 这个互动图形是怎么实现的呢？ 贴代码为敬 //p5，基于JavaScript的一个绘图库（函数、变量、常量） //自定义的变量 let x = 0; //小圆的横、纵坐标 let y = 0; let xSpeed = 3;//小圆的横、纵方向速度 let ySpeed = 3;...
弹性盒子Flex的最后一项向右对齐
qq_41507093的博客
02-27 9501
在最后一个盒子添加一行css即可 { margin-left:auto } 原文来自原文地址 转自CSDN
CSS设置滚动条样式（兼容IE）
热门推荐
Rey
05-18 8万+
废话不多说，直接上demo，最下面有详细注释。 1、这是在webkit浏览器下显示的样式。 （个人比较喜欢简约点的） 2、在IE浏览器下显示的样式（为了区分所以样式写的不一样，我没找到IE下设置滚动条宽高的方法） 下面是代码： Lorem ipsum dolor sit amet, consectet
css hover图片hover效果兼容ie8
weixin_30483697的博客
11-12 253
例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0;...
DFT 2D X-normal
最新发布
07-28
该函数的参数包括输入矩阵src、输出矩阵dst、是否进行转置操作的标志aTa、可选的增量矩阵delta、缩放因子scale和数据类型dtype。\[1\] 引用\[2\]:在使用cv::mulTransposed函数的示例场景中，可以通过设置不同的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值