HTML+CSS：平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放

已于 2022-10-17 17:04:22 修改
阅读量1.5k 收藏 8
点赞数 2
分类专栏： HTML5+CSS 文章标签： 平面 css html
于 2022-10-17 17:01:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43472877/article/details/127366683
版权

文章目录

transform系列

transform属性实现元素的位移、旋转、缩放等效果

在这里插入图片描述

transform:translate()位移

在这里插入图片描述

在这里插入图片描述

案例：位移-绝对定位居中

在这里插入图片描述
在这里插入图片描述

案例：双开门

在这里插入图片描述

在这里插入图片描述

transform:rotate()旋转

在这里插入图片描述
在这里插入图片描述

transform-origin属性改变转换原点

  • 默认圆点是盒子中心点
  • transform-origin: 原点水平位置 原点垂直位置;

取值
Ø 方位名词（left、top、right、bottom、center）
Ø 像素单位数值
Ø 百分比（参照盒子自身尺寸计算）
在这里插入图片描述

transform复合属性实现多形态转换

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

transform:scale()缩放

使用scale改变元素的尺寸
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

  • transform: scale(缩放倍数);
  • scale值大于1表示放大, scale值小于1表示缩小
    在这里插入图片描述
    缩放案例：
    在这里插入图片描述
_七七
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 transform过渡抖动问题解决
01-18
transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如： transform: scale(1.2); 换成： transform: scale(1.2) rotate(0.1deg); transform:translate();偏移会使图片或文字变得模糊 transform偏移还会使图片或文字失帧，变得模糊，可以使用clac解决 如： transform:translate(-50%); 换成： transform: translate(calc(-50% + 1px)); clac是css3
CSS3转换功能transform主要属性值分析及实现分享
01-19
今天我想介绍一下转换的用法： transform主要包括以下属性值： rotate(旋转度数) scale(缩放) skew(斜切扭曲) translate(对象平移) 利用上述属性值，可以实现一些很酷的效果，比如正方体，下面是我做的一个效果，三个大小不等的正方体代码如下： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xh
HTML CSS笔记变形效果-过渡效果-动画效果
weixin_34396103的博客
05-01 655
一．transformCSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个：transform 和 transform-origin。对于 transform 的属性值，具体如下表：//向水平和垂直各移动 200 像素，也可以使用百分比transform: translate(200px,200px); //向水平平移 200 像素，不加后面的 0 也可以 ...
Transform scale 属性
weixin_44879787的博客
07-07 1万+
使用 CSS Transform scale 属性 CSS 属性transform里面的scale()函数，可以用来改变元素的显示比例。 下面的例子把页面的段落元素放大了 2 倍： p { transform:scale(2); } transform属性有很多函数，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如:hover时，transform属性可以方便的给元素添加交互。 下面是当用户悬停段落元素时，段落大小缩放到原始大小 1.1 倍的例子： <sty
Transform【变形】属性
精彩人生
02-11 5972
来源：http://www.w3cplus.com/content/css3-transform 今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。 Transform字面上就是变形，改变的意思。在CSS3中tr
transform三大属性之scale（缩放）
热门推荐
weixin_44167504的博客
09-05 3万+
transform三大属性之scale scale(数值)定义倍数缩放，>1放大，<1缩小 scaleX()通过x轴定义，仅水平方向缩放 scaleY()通过y轴定义，仅垂直方向缩放 scaleZ()通过z轴定义，定义3d缩放 transform: scale(2);放大两倍 transform: scaleX(2);水平方向放大两倍 transform: scaleY(2);垂直方向放大两倍 缩小同理。 ...
transform三大属性 rotate、scale、translate
weixin_44167504的博客
09-05 1万+
transform三大属性 transform三大属性：rotate(旋转) scale(缩放) translate(移动) 其他属性：skew(扭曲) matrix(矩阵变形) 语法：transform：rotate | scale | skew | translate |matrix; 一. 旋转rotate rotate(angle)定义2D旋转 rotateX(angle) rotateY(angle) rotateZ(angle) rotate3d(angle)定义3d旋转 二.
css缩放（不同屏幕适配） transform属性的scale（）方法
hsany330的专栏
06-01 1万+
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。 语法：transform： scaleX（x）； / 沿x轴方向缩放/ transform: scaleY(y); / 沿y轴方向缩放/ transform： scale（）； / 同时沿x轴和y轴缩放/ 说明： 跟translate()方法类似，缩放也有3种情况：scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数，参数y表示元素在y轴方向的缩
CSS3的新特性(三）2D转换
Bella.的博客
01-17 1423
转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果 转换(transform)可以简单理解为变形 移动：translate 旋转：rotate 缩放：scale
HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏
lixiaosenlin的专栏
09-21 1万+
前面我们已经介绍过了2D转换，那么我们即将学习的3D转换又是什么呢，它跟2D转换有什么不同呢？ 在我们日常生活的环境就是3D的，我们多看到的物体也都是3D的，而我们拍的照片就是3D物体在2D平面中呈现的样子 。 3D的特点 近大远小（离我们眼睛越近看上去越大，而离眼睛越远则看上去越小） 物体后面遮挡不可见 根据这些特点我们就可以在网页上模拟构建出3D效果。 三维坐标系 我们前面讲过的2D是一个平面坐标系，而3D则是三维坐标系。三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴.
css3 transform属性详解
12-13
CSS3变形是一些效果的集合，比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发生旋转、缩放、和平移等变化。 CSS3的2D ...
随手记——css3 2D转换（transform）
01-08
css3 2D转换（transform） 位移（translate） 旋转（rotate） 转换中心点（transform-origin） 缩放（scale） 2D转换综合写法 正文 __start： 位移（translate） 语法 说明 transform:translate(x,y) 元素在x...
浅谈CSS3鼠标移入图片动态提示效果（transform）
01-19
第一次尝试着写博客，...transform的属性包括： translate()/rotate() / skew() / scale() /，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。 transform:translate() 含义：变动，位移；例如向右位移2
html 变形属性,css变形transform属性详细介绍
weixin_33561009的博客
06-04 448
transition：过度属性transition-property 规定设置过度效果的css属性的名称，默认可以写alltransition-duration 规定完成过度效果需要多少秒或毫秒transition-timing-function: 默认easetransition-delay：延时时间ease:逐渐变慢linear:匀速ease-in:加速ease-out:减速ease-in-o...
html中的旋转变化,CSS3 - 变换（Transform）的使用，以及变换的过渡
weixin_32876681的博客
06-10 897
1，变换函数translateX(x)：在水平方向移动元素，正值向右移动。translateY(y)：在垂直方向移动元素，正值向下移动。translate(x,y)：在水平和垂直方向移动元素。scaleX(x)：在水平方向缩放元素(1.0是原始大小)。使用负值会将元素绕y轴翻转，创建一个从右到左的镜像。scaleY(y)：在垂直方向缩放元素(1.0是原始大小)。使用负值会将元素绕x轴翻转，创建一个...
html中的transform属性,css3的transform属性详解
weixin_33217202的博客
06-04 9065
transform变形属性(主要讨论2D)css 3的transform属性可以修改css中可视化模型的坐标空间，元素通过transform属性进行移动(translate)、旋转(rotate)、缩放(scale)以及倾斜(skew)注意：规范中有规定——如果元素的transform值不为none，则该元素会生成包含块的创建和层叠上下文包含块的创建和层叠上下文会影响子元素的一些属性(这里我只是简...
html倾斜变形,浅谈CSS3中的变形功能-transform功能
weixin_39606118的博客
06-09 581
CSS3中的变形功能：在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。1、如何使用transform功能：(1)在CSS3中通过transform属性来实现transform功能：(2)transform功能使用方法：transform:功能;-ms-transform:功能;/*IE9*/-moz-transform:功能;/*Firefo...
html中scale布局,详细介绍css3的transform中scale缩放
weixin_42295528的博客
06-21 3753
css即层叠样式表。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。今天小编要给大家分享一篇教程，那就是：详细介绍css3的transform中scale缩放。在这一篇教程里面，小编主要和大家简单的介绍一下：css3的transform中scale缩放的使用方法。如果不懂得这一个知识点的朋友，现在就跟着小编一起来学习一下吧。接下来小编会从3个方...
HTML 表格table tr td、表头标题、表结构、合并单元格
七七的博客
03-04 9779
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整,可读性非常好。 特别是后台展示数据的时候,能够熟练运用表格就显得很重要。 一个清爽简约的表格能够把繁杂的数据表现得很有条理。 表格不是用来布局页面的，而是用来展示数据的。 <table> <tr> <td>单元格内的文字</td> </tr> </...
transform:rotate(-45deg) translate(40px) scale(0.8);
最新发布
03-20
这是CSS中的变换属性，可以实现旋转、平移和缩放的组合效果。其中，rotate(-45deg)表示将元素逆时针旋转45度，translate(40px)表示将元素向右平移40像素，scale(0.8)表示将元素缩小为原来的80%。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值