如何用CSS实现2D与3D的转换效果(transform)
css的兼容性问题
W3C组织是对网络标准制定的一个非盈利组织。其成员包括一些大型互联网技术、供应商、团体用户、研究实验室、标准制定机构和政府部门。由于各大浏览器使用的标准不一样,导致了有些样式写了但网页不兼容,W3C设定了整个平台的规则,监督整个过程,使样式最大程度的被各大浏览器实现。
CSS2.1的兼容性很好,css3要考虑兼容性问题。
在需要考虑兼容性的样式前要加浏览器前缀。
浏览器前缀 :
谷歌 苹果 -webkit-
火狐 -moz-
IE -ms-
欧朋 -o-
可以使用https://www.caniuse.com进行浏览器兼容性查询。
2D过渡方式(transition-后缀)
transition 过渡
之前:元素从一个状态到另外一个状态(hover)直接切换,从开始状态到结束状态瞬间完成,中间过程几乎不可见。
css3新增了过渡这个属性,可以实现元素不同状态之间的平滑过渡。
transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 必填
transition-duration: 过渡的时间,单位可以是s或者ms。 必填
transition-delay:指定过渡生效的延迟时间。
transition-timing-function:
ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
复合属性:transition:all 3s linear 1s;
书写顺序:过渡属性 完成时间 运动曲线 延迟时间
一般有数值/中间状态的属性才可以设置过渡,比如:width,height
具有过渡属性的样式(transform)
缩放(transform:scale(x,y) )
transform:scale(x,y);
x:代表水平方向的缩放倍数
y:代表垂直方向的缩放倍数。
如果只写一个值,代表等比例缩放。
不会改变真实宽高,也不会旁边的盒子造成影响。
解释:以图片中心为原点向外(X和Y方向)放大两倍。
位移(transform:translate(xpx,ypx) )
tramsform:translate(水平位移,垂直位移);
位移是以盒子本身的水平轴进行移动,不是网页显示的水平或垂直方向。
位移取值单位:
- px正值:向右或向下。
- 百分比是按照盒子本身的宽高。
像素值:
transform: translate(100px, 100px);
百分比:
transform: translate(50%, 50%);
只写一个值时,是水平位移。
旋转(transform:rotate())
transform:rotate(角度)
角度取值单位:deg
transform: rotate(45deg);
位移+旋转
transform 后面可以书写多个转换,但是书写顺序不同,效果不同。
倾斜(transform:skew())
transform:skew(水平倾斜角度,垂直倾斜角度)
角度取值单位:deg,正值顺时针,负值逆时针。
所有的转换属性,只能添加给块级元素,行内元素无效。
transform: skew(0, 45deg);
3D效果
3D旋转:
transform:rotate3D(x,y,z,deg);
x,y,z是一个0/1的数值,0表示不旋转,1表示旋转,deg表示旋转的角度。
rorateX,X轴旋转
rorateY,Y轴旋转
rorateZ,Z轴旋转,相当于在当前平面内旋转
旋转的方向:左手法则
左手握住旋转轴,大拇指指向旋转的正方向,其他手指的卷曲方向就是旋转的正方向。
位移:
transform:translateX();//沿着x轴移动
transform:translateY();//沿着Y轴移动
transform:translateZ();//沿着Z轴移动,有纵深的效果,
transform:translate3d(x,y,z);
div:hover {transform: translatez(-100px);}
透视perspective:
设置给变换盒子的父容器。
透视:
设置用户眼睛与屏幕的距离。
透视效果只是视觉上的呈现,不是真正的距离。
translateZ为正值,perspective值越小,盒子与你的距离越近,看到的效果也就越大。
translateZ为0,perspective不管怎么变化,盒子上的阴影不变,看到的效果不变。
translateZ为负值,perspective值越小,盒子与你的距离越近,看到的效果也就越小。
3D呈现transform-style
某个图形是由多个元素组成的。可以给这些元素的父元素添加一个transform-style:persevere-3d来使其变成一个真正的3d图形。
如何用CSS实现2D与3D的转换效果(transform)相关推荐
- CSS学习(五)—— 背景与渐变、2D与3D的转换
八.背景与渐变 1.背景基础知识 1) 背景颜色基础知识 background-color 属性表示背景颜色,颜色可以用十六进制.rgb().rgba()表示法进行表示 注:padding区域是由背景 ...
- 2d的公式_用深度学习实现 2D 到 3D 的转换
随着 5G 时代的到来,VR 端应用呈爆发式增长,3D 内容作为构建 VR 生态的主力输出一直深受广大用户的追捧和喜爱.针对目前 3D 内容过少,质量不高.生产昂贵等现状,爱奇艺作为国内领先的互联网视 ...
- 双目相机定位3d python_用深度学习实现 2D 到 3D 的转换
随着 5G 时代的到来,VR 端应用呈爆发式增长,3D 内容作为构建 VR 生态的主力输出一直深受广大用户的追捧和喜爱.针对目前 3D 内容过少,质量不高.生产昂贵等现状,爱奇艺作为国内领先的互联网视 ...
- 学术派 |用深度学习实现2D到3D的转换
随着 5G 时代的到来,VR 端应用呈爆发式增长,3D 内容作为构建 VR 生态的主力输出一直深受广大用户的追捧和喜爱.针对目前 3D 内容过少,质量不高.生产昂贵等现状,爱奇艺作为国内领先的互联网视 ...
- CSS的2D与3D变换
我们观看的电影普遍分为2D电影与3D电影,而我们的css的转化方式也分为2D转换和3D转换 2D转换 通过translate rotate scale skew matrix等属性进行2D转化 tra ...
- 手把手教你用CSS实现一个VR 3D游戏菜单栏效果
3D游戏菜单组件 关于如何建立一个响应性.适应性和无障碍的3D游戏菜单的基础性概述. 在这篇文章中,我想带着大家写一个3D游戏菜单组件的案例.首先让我们看看成品是什么样子的 概述 相信大家都玩过赛博朋 ...
- 如何用CSS实现漂亮的个人资料卡效果
点击上方 前端瓶子君,关注公众号 回复算法,加入前端编程面试算法每日一题群 我们可以仅使用CSS为我们的网站做一些很棒的设计.在本文中,我将向你展示如何制作具有出色悬停效果的个人资料卡. 在开始之前, ...
- HTML+CSS+JS实现 ❤️canvas 3D云动画效果❤️
- 如何用css画胡子-单标签实现胡子效果
我们最终要实现的效果如下: 你们相信吗?这么一个相对复杂的图形只需要一个div就能够实现.下面就跟我来学习如何实现. 1. 首先写出代码结构,只需要如下一行 <div class="m ...
最新文章
- 15.使用一样的BFS方法(代码几乎一模一样)解决多道LeetCode题目--542题(01矩阵)1765题(地图中的最高点)994腐烂的橘子
- 智能车竞赛中的车模足底按摩
- DeviceEventEmitter 使用监听通知进行传值
- EDITOR-CALL语句的使用:修改abap内表的内容(代码摘抄)
- 编程语言中常见数据结构
- 【译】将IDataRecord自动填充到实体的扩展方法
- spring boot集成kaptcha图形验证码
- Spring与Web整合
- CMake笔记1 构建基本的项目
- 字节跳动在 Spark SQL 上的核心优化实践
- 【iCore3应用】基于iCore3双核心板的编码器应用实例
- 【服务器】WAMP一键安装PHP开发环境
- 开博啦——半路出家做运维以来的一些杂感
- GOOD AI Example GREAT AI Company
- stm32F407hal+AD9854dds配置+源程序
- android T 后台限制
- 【论文精读】Deep Rectangling for Image Stitching: A Learning Baseline
- CentOS7 配置R语言及Rstudio-serve
- C语言 | 自由落地,求第10次落地共经过多少米
- 现阶段为什么国内程序员无法很好的参与到开源社区?