css:transform

最新推荐文章于 2025-12-25 17:20:30 发布
原创 最新推荐文章于 2025-12-25 17:20:30 发布 · 779 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #html #前端
本文介绍了CSS3中的关键变换属性，包括位移（translate）的使用，通过指定水平和垂直移动距离或仅单向移动；旋转（rotate）以角度表示；以及缩放（scale）控制元素的大小，可设置特定原点和等比例或非等比缩放。

/*设置时间 */

transition :all 1s;

位移

transform:translate(水平移动距离，垂直移动距离)

translate如果只给出一个值,表示x轴方向移动距离
单独设置某个方向的移动距离   translateX  和 translateY

旋转

transform:rotate(角度) 角度单位是deg

/* 改变原点 */

 transform-origin:right bottom;

 transform-origin:0px 0px;

以上两点结合可以实现边走边转

缩放

transform: scale(x轴缩放倍数,y轴缩放倍数);

一般情况下,只为scale设置一个值,表示x轴和ye轴等比例缩放
transform:scale(缩放倍数)
scale值大于1 表示放大  scale值小于1 表示缩小

ZHH_211
关注
利用transform打造走动的2D时钟
weixin_72303943的博客
07-24 198
利用transform打造走动的2D时钟
CSS3--利用transform属性制作时钟效果
Wendy
01-11 6315
首先简单总结一下transform这个属性，transform的含义是：改变，使…变形；转换。 transform的常用属性：        1）rotate()  旋转函数 取值度数              deg  度数              Transform-origin 旋转的基点        2）skew() 倾斜函数 取值度数               skew
每日算法讲解（一）：基于Transformer的时间序列预测
rhtee的博客
06-23 4609
Transformer模型最初由Vaswani等人在2017年的论文《Attention is All You Need》中提出。与传统的RNN模型不同，Transformer模型完全基于注意力机制（Attention Mechanism），可以并行处理数据，具有更高的效率和更强的长程依赖捕捉能力。Transformer模型由编码器（Encoder）和解码器（Decoder）组成。编码器负责将输入序列编码为隐藏表示，解码器根据这些隐藏表示生成输出序列。在时间序列预测中，我们通常只使用编码器部分。
用php做动态时钟,CSS_利用CSS3的transform做的动态时钟效果，1. transform 与 transform-origin 使用 - phpStudy...
weixin_31431507的博客
03-23 349
1. transform 与 transform-origin 使用说明目前这两个属性得到了主流浏览器IE，webkit，firefox，opera的支持，属性名分别为-ms-transform -webkit-transform，-moz-transform，-o-transform。可能有人会疑问为什么要加各浏览器的前缀(-ms-),本人认为可能在浏览器新版本发布时，此CSS属性还没有正式被W...
每日一结笔记
xz100599的博客
09-27 361
x轴：水平，向右为正，向左为负y轴：垂直，向下为正，向上为负。
css3 transform:scale
无心使然云中漫步
01-07 866
可以看到，中间的box缩放后，显示长宽确实为原来的一半，但是左右两个box与它的距离并没有重新计算，也就是说缩放后，视觉上可以看到效果，但是布局不会根据缩放后的大小重新计算,如果需要重新布局，需要自定义margin、transform:translate等进行补偿。语法：transform:scale(x,y);
CSS Transform 导致 position:fixed 失效的排查与解决
最新发布
No_Name_Cao_Ni_Mei的博客
12-25 880
CSS Transform导致position:fixed失效问题的排查与解决。在Nuxt 2项目中，底部导航栏的fixed定位异常，最终发现是响应式缩放插件的transform属性改变了定位上下文。解决方案是使用Portal-Vue将组件DOM传送到body下，脱离transform影响。文章详细介绍了问题现象、排查过程、技术原理（transform创建新包含块）、Portal方案实施步骤，并总结了CSS Transform的副作用、调试技巧和Portal适用场景。这个案例揭示了CSS定位与变换属性的深层
css3的transform:tanslateZ没有效果:
qq_44259670的博客
02-19 2206
css3的transform:tanslateZ没有效果: 问题描述： 提示：今天在写css属性的时候发现transform:tanslateZ属性怎么改都是没有动画效果的的，translateX或tansform：translateY都是可以的。 原因分析： 提示：在使用translateZ的属性的时候，首先加上transform-style：preserve-3d（在变形元素自身上指定该属性是没有用的，它用于指定舞台，所以要在变形元素的父元素上设置该属性） 设置后运行发现还是没有效果，这时候只能求
css transform: translate() 位移.html
weixin_42193179的博客
07-19 1548
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform_translate</title> <style> *{ padding: 0px; ...
css3的transform:tanslateZ没有效果
weixin_30363981的博客
07-09 3682
关于css动画tansform：translateZ(100PX)没有效果的记录 之前学习cs3动画就学的迷迷糊糊的，这次项目中刚好用到了cs3动画，遇到了一个问题，记录下来，方便后期查阅 在使用 tansform属性时，值设为tansform：translateX或tansform：translateY都是可以的，但是设置成tansform：translateZ就没有动画效果 排查 1.一般遇到...
css：过渡transition 、转换transform、动画animation
weixin_46001736的博客
10-11 2619
css：过渡transition 、转换transform、动画animation
【过渡效果transition，transform属性】
renrenrenrenqq的博客
01-12 2360
transform属性，过渡transition
一篇文章吃透 CSS3 属性： transition过渡 与 transform动画
热门推荐
weixin_52212950的博客
09-28 1万+
transition 过渡与transform动画 这两个新属性的参数确实比较复杂，它们可以做出 CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习 CSS 的难记易忘之处，今天给大家详细总结出来。一：transition 过渡transition 可以做出 CSS 的过渡效果，例如要过渡的属性名称，要过渡的时间，过渡的延迟等待时间，过渡的速度变化（过渡类型）
原生js实现一个简单的时钟(transform属性)
wxt_wjc的博客
01-11 666
图片版请看我的下一篇博客 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
CSS3动画-transition、animation、transform（translate/scale/rotate）
03-19 3826
目录 一、transition（过渡） 1、transition-duration 2、transition-property 3、transition-timing-function 4、transition-delay 二、animation 1、@keyframes 2、animation-timing-function 3、animation-delay 4、animation-iteration-count：检索或设置对象动画的循环次数 5、animation-pla...
CSS中transform属性
weixin_42812634的博客
08-30 812
位移 transform: translate(水平移动距离，垂直移动距离) 旋转 transform: rotate(角度，单位deg)，正：顺时针，负：逆时针 缩放 transform: scale(X轴缩放倍数，Y轴缩放倍数) transition用法 transition:[属性名] [持续时间] [速度曲线] [延时时间] 例如：transition: height 2s ease 0.5s 当高度属性的值改变时，延迟0.5秒后以ease曲线进行过渡，持续时间为2秒。 想要监听所有属性的话
CSS进阶之形变与动画 (一)：transform、垂直居中总结、transition动画、animation动画、vertical-align
Good Good Study,Day Day Up!
05-30 1万+
水平居中的方案行内级元素：设置父元素的 text-align:center块级元素：设置当前块级元素(要有宽度) margin:0 auto绝对定位：元素有宽度的情况下，设置left0、right0、margin:0 auto；flex布局：通过设置justify-content: center;垂直居中的方案绝对定位： 元素要有高度的情况下，设置top0、bottom0、margin:auto 0;flex布局 通过设置align-
css3-手把手 transform 小时钟
dongkaoji0964的博客
03-16 199
学习css3ing，正在学习transfomr，突发奇想用此做个小时钟，开始吧： 准备前期工作，把时钟的表盘，时分秒针，实时时间标签 的大概样子做好，效果如图： html代码如下： <div class="main"> <div id="timeLabel"></div> <div id=...
使用animation和transform快速写一个时钟，
m0_66940434的博客
04-13 489
CSS代码不多，这里没有引入CSS样式，css样式在style里写 div类名line代表表内的刻度线，center代表中间遮挡多余线的圆，second秒针，minute分针，hour时针，origin代表圆中心的点（只是装饰效果） 第一步要先让父盒子居中再把盒子变成一个圆给个边框，因为后面要把刻度线及表针定位到父盒子身上，采用子绝父相的定位方式，先给父盒子添加上相对定位position: relative; <body> <div class="box">
每日知识总结
zywlg的博客
02-26 146
旋转 | transform: rotate();| 一个值（等比例缩放）、两个值 | 没有单位 | transform: scaleX();| 一个值（沿着水平方向位移），两个值 | 像素px | transform: translateX();| 一个值（沿着水平方向倾斜）、两个值 | deg角度 | transform: skewX();- a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；- a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值