CSS3变形透视动画总结
CSS3变形透视动画总结
- 1. 总览
- 2. 移动元素
- 2.1 平面移动
- 2.2 Z轴方向移动
- 2.3 XYZ轴同时控制
- 3. 缩放元素
- 3.1 元素变形原点
- 4. 旋转元素
- 5. 倾斜元素
- 6. 透视
- 6.1 什么是透视?
- 6.2 CSS3实现透视
- 6.3 3d透视
- 6.4 透视方位
- 7. 隐藏元素背面
1. 总览
使用transform规则可以控制元素的变形透视动画操作,包括控制移动、旋转、倾斜、3D转换等。
属性值
属性值 | 说明 |
---|---|
none | 定义不进行转换。 |
translate(x,y) | 定义 2D 转换。 |
translate3d(x,y,z) | 定义 3D 转换。 |
translateX(x) | 定义转换,只是用 X 轴的值。 |
translateY(y) | 定义转换,只是用 Y 轴的值。 |
translateZ(z) | 定义 3D 转换,只是用 Z 轴的值。 |
scale(x,y) | 定义 2D 缩放转换。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
perspective(n) | 为 3D 转换元素定义透视视图。 |
注意:
重复设置变形操作时只在原来的状态下进行操作,重复设置表示在不同位置进行设定,如果要效果叠加,需要使用transform一起设置,且放在transform上的属性顺序不同效果也不一样。
比如:
transform: rotateX(deg) rotateY(deg); 不同于效果 transform: rotateY(deg) rotateX(deg)
行级元素不产生变形效果,也即:transform对行级元素无效。
2. 移动元素
2.1 平面移动
transform: translateX(x)
在X轴方向上进行移动
transform: translateY(y)
在Y轴方向上进行移动
- x为正数:向右移动
- x为负数: 向左移动
- y为正数:向下移动
- y为负数:向上移动
属性值:
px
指定移动的具体值
%
相对于元素自身大小的倍数,比如:
transform: translateX(-100%)
,表示沿着X轴负方向(左部)移动自身大小一倍的距离。em
相对于元素中设置的字体大小(
font-size
)的倍数距离,font-size: 10px; transform: translateX(1em);
表示沿X轴正方向(右部)移动相对于字体大小1倍的距离10px。
以上两个属性可以简写在一行,也即:
transform: translateX(100px) translateY(100px);
或者采用内置属性值方式进行简写
transform: translate(100px,100px); // 其中第一个属性值为X轴方向的移动距离,第二个属性值为Y轴方向移动的距离。
例子:
<main><div></div>
</main><style>main {width: 200px;height: 200px;margin: 100px auto;border: 1px solid #000;box-sizing: border-box;
}div {width: 50px;height: 50px;background: linear-gradient(45deg,#bfc0c1,#bec2bc,#251a15);// 使div元素位于父元素main中间位置处transform: translate(150%,150%);
}
</style>
2.2 Z轴方向移动
使用transform: translateZ(z)
可以控制元素在Z轴方向上的移动。由于Z轴是透视轴,没有像X/Y一样的固定尺寸,所以不能使用百分数来进行控制移动距离。
2.3 XYZ轴同时控制
可以使用transform: translate3d(x,y,z)
同时控制元素在x,y,z轴上面的移动。如果某一方向不移动,则置为0。
3. 缩放元素
- scaleX()在X轴上进行缩放
- scaleY()在Y轴上进行缩放
- scaleZ()在Z轴上进行缩放
简写方式
scale(x,y)
- 如果是一个值,则表示XY轴缩放系数一致
- 如果是两个值,第一个表示在X轴上的缩放,第二个数值表示在Y轴上的缩放
scale3d(x,y,z)
同时对x y z 轴进行缩放处理
属性值:
- 属性值为数值,当属性值大于[-1,1]时,表示元素按照默认的元素中心位置放大相应比例大小,当属性值等于-1/1时,表示元素不变化,当元素在(-1,1)之间的时候,表示元素按照默认的元素中心位置缩小处理。当属性值为0时,元素不显示。
注意:该属性也是在元素原来的位置上进行变形的,也即:如果同时使用了transform: translate(x,y) scale(x,y)
,那么操作只会以最后一次的变形为准,且操作基础为元素没有进行变形操作之前的位置。
以12.2.1的例子来看,12.2.1的例子中通过transform: translate(150%,150%)
移动到了父元素main的中间位置,此时如果再加上transform: scale(3,3)
在x y轴上进行缩放
transform: scale(2,2);
3.1 元素变形原点
元素默认以元素中心进行变形操作。如果需要更改元素变形原点,可以使用transform-orgin
进行设置。
transform-origin
用于更改一个元素变形的原点,默认为center
transform-origin
属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。
如果定义了两个或更多值并且没有值的关键字,或者唯一使用的关键字是center
,则第一个值表示水平偏移量,第二个值表示垂直偏移量。
- 一个值:
- 必须是<length>,<percentage>,或
left
,center
,right
,top
,bottom
关键字中的一个。
- 必须是<length>,<percentage>,或
- 两个值:
- 其中一个必须是<length>,<percentage>,或
left
,center
,right
关键字中的一个。 - 另一个必须是<length>,<percentage>,或
top
,center
,bottom
关键字中的一个。 - 也即如果只使用关键字,需要注意顺序的问题。
- 其中一个必须是<length>,<percentage>,或
- 三个值:
- 前两个值和只有两个值时的用法相同。
- 第三个值必须是<length>。它始终代表Z轴偏移量。
<main><div></div>
</main><style>
main {width: 200px;height: 200px;margin: 100px auto;border: 1px solid #000;box-sizing: border-box;
}div {width: 50px;height: 50px;background: linear-gradient(45deg,#bfc0c1,#bec2bc,#251a15);
}main:hover div{// 定义变形原点为元素的上右部分transform-origin: top right;// 元素放大两倍transform: scale(2);
}
</style>
4. 旋转元素
使用CSS可以控制元素按照不同坐标轴进行旋转。
rotateX()
按照X轴进行旋转操作
属性值为:angle,
如果为正,表示顺时针旋转,如果为负表示逆时针旋转
main:hover div {transform: rotateX(90deg); }
当旋转到90deg的时候,元素与Z轴平行,所以会导致从Z轴方向看,看不到元素的情况。
当旋转到89deg的时候,从Z轴方向看,只有一条线存在。
rotateY()
与
rotateX()
一致,此时沿着Y轴进行旋转rotateZ()
沿着Z轴进行旋转,效果与沿X/Y平面旋转一样。
rotate(x,y)
沿着平面进行旋转
rotate3d(x,y,z,angle)
沿着x,y,z旋转,用于3d空间。x y z 严格控制顺序,且值在[0,1]之间,表示旋转轴坐标上面的矢量。
5. 倾斜元素
skewX(deg)
沿X方向倾斜,正数表示逆时针方向倾斜,负数表示顺时针方向倾斜。
只要倾斜角度不超过180°,元素都会保持本身的高度,同时为了保持倾斜,元素只能沿着x轴方向拉长本身。
skewY(deg)
沿着y方向倾斜,正数表示顺时针倾斜,负数表示逆时针方向倾斜。
skew(deg,deg)
设定元素在x y轴上的倾斜
6. 透视
6.1 什么是透视?
我们拍摄的时候,我们拍的是三维空间的物体,但是我们的照片却是二维的、平面的,“透视”其实是指我们在二维平面上再现三维空间的空间感、立体感的观察方法。
透视的特征:
近大远小
离得近的物体,其显示就会比较大,如果离得远,那么该物体显示就会比较小且很完整。
近宽远窄
类似于近大远小一样,离得越近的物体,其显示的宽度也越大,相反宽度越小
近实远虚
距离你近的物体相信你会看到更清晰,远处的就比较模糊。
6.2 CSS3实现透视
CSS3中也可以处理透视。
使用perspective
可以控制元素的透视,加上此属性则该元素/该元素的子元素变可以进行透视显示(在元素在xyz轴上进行变形的时候可以观察到效果)
属性值:px
表示所透视的物体观察的远近,值越大,观察得远,那么离物体就越远,物体显示就会越完整,看的也越全面
transform: perspective(900px) rotateY(60deg);
值越小,观察的比较近,那么可能只能看到元素的某个部分,看的也不是特别全面
transform: perspective(55px) rotateY(60deg);
该属性可以对单个元素设置控制,也可以对元素内部子元素进行透视设置(元素本身不存在透视)
对元素本身进行透视设置
transform: perspective(px);
对元素本身进行透视设置,不影响父元素以及子元素
<main><div>1</div><div>2</div> </main><style> main {display: flex;position: relative;box-sizing: border-box;border: 2px solid #fff; }div {width: 200px;height: 200px;margin-right: 10px;background: radial-gradient(at center center,pink,yellow);transform: perspective(900px) rotateY(60deg);display: flex;justify-content: center;align-items: center;font-size: 2em;color: #fff; } </style>
此处给子元素添加了透视,可以看出,只有子元素进行透视显示了
此时如果只给父元素添加透视,如下图,可以看出只有父元素进行透视显示,而子元素没有影响。
给子元素添加透视
perspective: 900px;
通过给元素添加此属性,只作用于子元素,而元素本身没有透视效果。
<main><div>1</div><div>2</div> </main><style> main {display: flex;position: relative;box-sizing: border-box;// 给子元素添加透视本身不被影响 perspective: 900px;transform: rotateY(45deg);border: 2px solid #fff; }div {width: 200px;height: 200px;margin-right: 10px;background: radial-gradient(at center center,pink,yellow);transform:rotateY(60deg);display: flex;justify-content: center;align-items: center;font-size: 2em;color: #fff; } </style>
从上图可以看出,在父元素main上添加perspective: 900px
,使得其子元素div有了透视效果,虽然main元素本身沿着Y轴旋转了45deg,但是由于此属性只会作用于子元素上,因此并不会有透视效果,也不会显示出来。
6.3 3d透视
仅仅使用perspective
只能对平面空间中的元素进行透视显示。原因:元素默认在平面空间中。为了观察到立体空间中元素的变化,需要设置元素位于3d空间中。
transform-style
用于设置元素的子元素位于3d空间中还是平面中
属性值
属性值 | 说明 |
---|---|
flat | 设置元素的子元素位于该元素的平面中。(默认) |
perserve-3d | 指示元素的子元素应位于 3D 空间中。- |
因此可以看出,该属性需要设置在父元素上,且作用于子元素身上。
假设不给父元素main添加属性transform-style
,只给其添加透视属性让其可以看到元素移动。
<main><div>1</div><div>2</div>
</main><style>
main {display: flex;position: relative;box-sizing: border-box;/*给子元素也添加透视 使其可以看到子元素变形*/perspective: 900px;/*给当前元素添加透视 可以观察到父元素和子元素一同沿着Y轴旋转45度*/transform: perspective(900px) rotateY(45deg);border: 2px solid #fff;
}div {width: 200px;height: 200px;margin-right: 10px;background: radial-gradient(at center center,pink,yellow);/*让子元素在Z轴上移动200px*/transform: translateZ(200px);display: flex;justify-content: center;align-items: center;font-size: 2em;color: #fff;
}
</style>
可以看出能大致看出来元素沿着Z轴上移动,但是效果不明显。
此时在main元素上添加transform-style: preserve-3d;
可以看到有明显的移动痕迹。
6.4 透视方位
默认情况下,透视方位为透视元素在x y 轴50%处进行查看元素。
也可以通过perspective-origin
设置透视方位,也就是设置从哪个地方去观测这个元素。(虽然我感觉设置之后和设置之前没有什么区别,用处还带考察)
属性值:
属性值 | 说明 |
---|---|
x-axis | 定义该视图在 x 轴上的位置。默认值:50%(元素本身)。可能的值:left、center、right、length、% |
y-axis | 定义该视图在 y 轴上的位置。默认值:50%。可能的值:top、center、bottom、length、% |
7. 隐藏元素背面
使用 backface-visibility
用于控制是否可以看到元素的背面。
- 一般设置在元素上而不是父元素上
- 需要在父级元素设置
transform-style: preserve-3d
才可以看到效果
属性值 | 说明 |
---|---|
visible | 背面可见 |
hidden | 背面隐藏 |
注:
如果发现元素不能点击,可能是父级设置了 transform-style: preserve-3d
属性,且同级元素设置了3D变化特性,造成对点击元素有遮挡。有以下两种方式解决
- 对变形元素设置
pointer-events: none;
使用其不接受点击事件 - 删除父级的
transform-style: preserve-3d
属性
CSS3变形透视动画总结相关推荐
- CSS3 变形 过渡 动画
文章目录 CSS3 变形 过渡 动画 transform(变形) 概述 translate() 平移 scale() 缩放 skew() 倾斜 rotate() 旋转 transform-origin ...
- CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 旋转.扭曲.缩放.位移.矩阵 ...
- 重新想,重新看——CSS3变形,过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
- CSS3变形、渐变、动画的基本使用
目录 CSS3 变形 2D转换 3D转换 CSS3颜色渐变 CSS3动画 transition过渡 animation动画 案例1:旋转的风车 案例2:摇晃的桃子 案例3:3D开门动画 总结 CSS3 ...
- 【CSS3初探之变形与动画】令人惊叹的CSS3
前言 这个标题比较狗血了,我一直知道CSS3可以做很多事情,但是我昨天看到一个人用CSS3华丽的画了一个太极八卦! 若是这个还可以接受,那么我今天就看见一个人用CSS3画了一个叮当猫!!!我突然就在想 ...
- CSS3知识点整理(三)----变形与动画
一.CSS3中的变形 1)旋转 rotate() rotate()函数通过指定的角度参数使元素相对原点进行旋转. 它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. 如果这个值为正值,元 ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- HTML学习笔记9——CSS3制作网页动画
CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 transform:[tr ...
最新文章
- 替换index和show中select_tag的方法
- 综合一2017.5.17
- linux grep 详细深入学习
- Jenkins持续集成环境之tomcat的安装和配置
- 从内存中窃取未加密的SSH-agent密钥
- 选择排序java代码_JAVA简单选择排序算法原理及实现
- mac系统maven spring mvc小试牛刀
- 绿色应用成主流,国内千款主流应用75%已达绿标
- fast虚拟服务器ip地址设置,falogin.cn fast怎样正确设置电脑的IP地址和DNS等参数? - falogincn登录页面...
- java计算经纬度距离_LeetCode 题解 |461. 汉明距离
- python实现触摸精灵功能_FRIDA脚本系列(三)超神篇:百度AI“调教”抖音AI
- 认知电子战 (1.3):认知电子战概述
- 一句话木马、中国菜刀、图片一句话制作、过狗一句话
- win10玩不了星际战甲怎么办?
- Arduino学习模拟输出
- 教程 - IDEA创建Servlet以及使用Html网页请求Servlet(零基础上手)
- iOS 多线程使用示例
- [Ubuntu]安裝搜狗輸入法
- 重新设置mysql密码
- 洛谷 P1195 口袋的天空 (题解+代码)
热门文章
- 数据结构:大学的数据统计
- 曼谷周末游(r5笔记第74天)
- 飞思卡尔K22调试FXOS8700加速度和电子罗盘(2)
- 项目奖金一般是多少_MPAcc职业发展|看看国内券商、投行、四大一年能挣多少?...
- 2017.10.27涩会题大乱斗部分题解
- 缓存数据库Redis
- 微信朋友圈点赞如何设计测试用例,微信发语音消息,购物车,支付页面如何设计软件测试用例?
- 生活中软件易用性的例子_大学生活中那些堪称神器的软件,真实且好用,生活学习必备...
- 关于接入新浪微博第三方登录
- soc 设计soc设计 uml实务手册_企业内训“软件需求设计建模方法学全程实例剖析”训练方案(2020年)...