过渡transition,transform2D转换,3D旋转
目录
- 过渡,2D转换
- transform 属性效果
- 缩放transform:scale
- 位移 transform: translate
- 旋转:transform:rotate
- 倾斜 transform:skew
- 3D旋转
- 位移 transform: translate3d(x,y,z);
- 翻面隐藏
- 3D呈现transform-style:persevere-3d
过渡,2D转换
transition 过渡
之前:元素从一个状态到另外一个状态(hover)直接切换,从开始状态到结束状态瞬间完成,中间过程几乎不可见。
css3新增了过渡这个属性,可以实现元素不同状态之间的平滑过渡。
transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 必须写
transition-duration: 过渡的时间,单位可以是s或者ms。
必须写
transition-delay:指定过渡生效的延迟时间。
transition-property: all;transition-duration: 2s;transition-delay: 2s;
transition-timing-function:
ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
复合写法:
过渡动画transition可以组合简写
div.box{ transition:all 0.5s ease-in 0.18s; }
它的语法顺序是
过渡属性 完成时间 运动曲线 延迟时间
{ transition:property duration timing-function delay; }
transition:all 3s linear 1s;all是所有属性也可以写transform例:transition:transform 3s linear 1s;中间用空格隔开
一般有数值/中间状态的属性才可以设置过渡,比如:width,height
transform 属性效果
缩放,位移,旋转,倾斜
缩放transform:scale
放大缩小。
格式
transform:scale(x,y);
x:代表水平方向的缩放倍数
y:代表垂直方向的缩放倍数。
如果只写一个值,代表等比例缩放。
不会改变真实宽高,也不会旁边的盒子造成影响。
位移 transform: translate
格式:
tramsform:translate(水平位移,垂直位移)
属性值:
px 正值:向右或向下。
百分比 是按照盒子本身的宽高。
只写一个值时,是水平位移。
.box:hover{transform: translate(100px,-100px);}
旋转:transform:rotate
格式: transform:rotate(角度)
单位:deg
transform-origin: 变换原点
格式: transform-origin: 水平坐标 垂直坐标;
px ~ 百分比 ~ 按照盒子的宽高。50%=center
单词 left center等
transform 后面可以书写多个转换,但是书写顺序不同,效果不同。
transform: translate(100px) rotate(90deg);第一种会先位移,再旋转transform:rotate(90deg) translate(100px) ;第二种会先旋转,再位移。
倾斜 transform:skew
格式:transform:skew(水平倾斜角度,逗号 垂直倾斜角度)
单位是deg,正值 顺时针,负值逆时针。
.box{width: 600px;height: 600px;transform: skew(45deg,0deg);}
所有的转换属性,只能添加给块级元素,行内元素无效。
仅仅是视觉上效果,不是实际占位,也不是实际宽高,不会干扰正常排版
3D旋转
transform: rotate3D(x,y,z,deg);
x,y,z 是一个0/1的数值,0表示不旋转,1表示旋转,
deg表示旋转的角度。
rorateX,X轴旋转
rorateY,Y轴旋转
rorateZ Z轴旋转
形象讲:
x轴旋转是不停打滚
y轴旋转是不停转身
z轴旋转是大风车转
.box:hover {/* transform: rotateX(180deg); *//* transform: rotateZ(180deg); */可以替换如下transform: rotate3D(1,1,1,180deg);}
旋转的方向:左手法则
左手握住旋转轴,大拇指指向旋转的正方向,其他手指的卷曲方向就是旋转的正方向。
位移 transform: translate3d(x,y,z);
transform: translateX(); 沿着x轴移动
transform: translateY();沿着Y轴移动
transform: translateZ();沿着Z轴移动
transform: translate3d(x,y,z);
翻面隐藏
backface-visibility: hidden;
3D呈现transform-style:persevere-3d
某个图形是由多个元素组成的。可以给这些元素的父元素添加一个transform-style:persevere-3d 来使其变成一个真正的3d图形。
perspective: 600px;设置屏幕和眼睛的距离
perspective 透视:
translateZ为正值,perspective值越小,盒子与你的距离越近,看到的效果也就越大。
translateZ为0,perspective不管怎么变化,盒子上的阴影不变,看到的效果不变。
translateZ为负值,perspective值越小,盒子与你的距离越近,看到的效果也就越小。
.box{ transform-style: preserve-3d;transition: transform 3s;transform: rotateX(13deg) rotateY(0deg);
}
过渡transition,transform2D转换,3D旋转相关推荐
- 【css3文字阴影+盒子阴影+过渡+2d转换+3d转换】
文字阴影text-shadow text-shadow 后面的值有4个: 第一个:X轴,水平阴影位置 允许负值. 第二个:y轴,垂直阴影位置,允许负值. 第三个:blur, 模糊的距离 第 ...
- 3D转换(位移,旋转)
透视 语法: perspective: 取值px; 作用:可以实现近大远小,近实远虚,如果想要z轴效果生效,必须要给父级加透视 概念:调整眼睛到屏幕之间的距离,值越大距离盒子越远,盒子看起来越小,反之 ...
- css3中3D转换动画效果---transform: rotate3d(x,y,z,) 3D 旋转
CSS3 允许您使用 3D 转换来对元素进行格式化. 转换属性 属性 描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 允许你改变被转换元素的 ...
- css3 3d旋转兼容模式下,CSS3 3D 转换
3D Transforms CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法:rotateX() rotateY() 点击下面的元素,来查看 2D 转 ...
- 沿着x轴旋转的html例子,CSS3旋转实例学习(附3D旋转实例)
我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果.在CSS3中有个常见的transform应用,transform主要包括以下几种:旋 ...
- CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局 文字发光 & 图 ...
- html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放 语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
- Android动画了解—转场/过渡(Transition) 动画
转场/过渡(Transition) 动画 Transition 是指不同 UI 状态转换时的动画. 界面过渡 界面 的 过渡 可以 分为 进入/出场 的过渡动画 设置进场/出场/返回/重新进入 的过渡 ...
- 2D转换之旋转与缩放
2D转换之旋转 rotate 2D转换指的是让元素在2维平面内顺时针旋转或者逆时针旋转. 1. 语法: transform:rotate(度数) 2. 重点: 1. rotate里面跟度数,单位是de ...
最新文章
- 不做“浮冰”,深挖AI技术和场景
- VTK:点定位器可视化用法实战
- Spring Cloud 采用Consul做配置中心
- LeetCode 2099. 找到和最大的长度为 K 的子序列
- java持久层用文件_Java持久层框架MyBatis简单实例
- SAS9.4安装简易教程(保姆级)附带报错处理
- 《善用佳软:高效能人士的软件应用之道》一2.2 流程图绘制软件:免费的Visio替代品...
- 55.伪造UDP数据包
- 转发:一个总经理的11个经典面试问题
- 可以叫板Google的一个搜索引擎——DuckDuckGo
- Delphi10.3.3 部署android 开发环境
- 脑袋里是浆糊时的c++程序
- 孔雀东南飞用mysql存储_孔雀东南飞的故事简介800字(孔雀东南飞主要内容介绍)...
- Windows 10 使用小鹤双拼
- 几款实用的内网穿透工具
- 上海市证券、保险公司一览
- Maven的下载以及安装
- 程序人生(一) 初生牛犊
- 网络爬虫requests和bs4简单入门
- 内是独体字还是半包围_独体字的结构