CSS 2D转换 动画 3D转换

这篇具有很好参考价值的文章主要介绍了CSS 2D转换 动画 3D转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 一、CSS 2D转换

转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(translate)、旋转(rotate)、缩放(scale)等效果

移动盒子的位置:定位、盒子的外边距、2d转换移动
1、2D转换之移动translate

CSS 2D转换 动画 3D转换,css,3d,前端

1、我们tranlate里面的参数是可以用%

2、如果里面的参数是%  移动的距离是  盒子自身的宽度或者高度来对比的

3、tranlate对于行内元素是无效的

2、2D转换之旋转 rotate

CSS 2D转换 动画 3D转换,css,3d,前端

3、2D转换中心点 transform-origin

CSS 2D转换 动画 3D转换,css,3d,前端

4、2D转换之缩放 scale

CSS 2D转换 动画 3D转换,css,3d,前端

CSS 2D转换 动画 3D转换,css,3d,前端

二、CSS3动画 animation

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精准控制一个动画

CSS 2D转换 动画 3D转换,css,3d,前端
CSS 2D转换 动画 3D转换,css,3d,前端
CSS 2D转换 动画 3D转换,css,3d,前端
CSS 2D转换 动画 3D转换,css,3d,前端
CSS 2D转换 动画 3D转换,css,3d,前端

1、一个完整的动画序列

CSS 2D转换 动画 3D转换,css,3d,前端

1、可以做多个状态的变化  keyframe 关键帧

2、里面的百分比是整数

3、里面的百分比就是  总的时间的划分

2、动画常用属性

CSS 2D转换 动画 3D转换,css,3d,前端

infinite 无限次

3、动画简写属性

animation: 动画名称 持续时间  运动曲线 何时开始  播放次数 是否反方向  动画起始或者结束的状态;

前面两个一定要写

CSS 2D转换 动画 3D转换,css,3d,前端

大数据热点图案例

中间的小圆点

CSS 2D转换 动画 3D转换,css,3d,前端

CSS 2D转换 动画 3D转换,css,3d,前端

不要用scale 因为它会让阴影变大

4、速度曲线细节

CSS 2D转换 动画 3D转换,css,3d,前端

速度曲线步长案例

CSS 2D转换 动画 3D转换,css,3d,前端

奔跑的小熊动画案例

CSS 2D转换 动画 3D转换,css,3d,前端

CSS 2D转换 动画 3D转换,css,3d,前端

三、CSS 3D转换

3D特点:近大远小,物体后面遮挡不可见

1、三维坐标系

CSS 2D转换 动画 3D转换,css,3d,前端

X轴: 水平向右   X轴右边是正值,左边是负值

Y轴: 垂直向下   Y下面是正值,上面是负值

Z轴: 垂直屏幕  往外面是正值,往里面是负值

3D转换我们主要学习最常用的3D位移和 3D旋转

3D位移: translate3d(x,y,z)

3D旋转: rotate3d(x,y,z)

透视: perspective

3D呈现  transfrom-style

2、3D移动  translate3d

CSS 2D转换 动画 3D转换,css,3d,前端

3、透视 perspective

CSS 2D转换 动画 3D转换,css,3d,前端

透视写在被观察元素的父盒子上面的

d: 就是视距,视距是一个距离人的眼睛到屏幕的距离

z: 就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体越大

有了透视就能看到translateZ引起的变化

4、3D旋转 rotate3d

可以让元素在三维平面内沿着x轴,y轴,z轴或者自定义轴进行旋转

CSS 2D转换 动画 3D转换,css,3d,前端

CSS 2D转换 动画 3D转换,css,3d,前端

左手的拇指指向y轴的正方向,其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)

z轴就是像转盘一样旋转

CSS 2D转换 动画 3D转换,css,3d,前端

5、3D呈现 transform-style

CSS 2D转换 动画 3D转换,css,3d,前端

双面翻转盒子案例

box父盒子里面包含前后两个子盒子,box是翻转的盒子  front是前面盒子 back是后面盒子

CSS 2D转换 动画 3D转换,css,3d,前端

CSS 2D转换 动画 3D转换,css,3d,前端

3D导航栏案例

CSS 2D转换 动画 3D转换,css,3d,前端

CSS 2D转换 动画 3D转换,css,3d,前端

CSS 2D转换 动画 3D转换,css,3d,前端

CSS 2D转换 动画 3D转换,css,3d,前端

CSS 2D转换 动画 3D转换,css,3d,前端

旋转木马案例

搭建HTML结构时需要<setion>标签里面是<div>标签

CSS 2D转换 动画 3D转换,css,3d,前端

CSS 2D转换 动画 3D转换,css,3d,前端

CSS 2D转换 动画 3D转换,css,3d,前端

千万不要忘给父盒子section 添加  transform-style: preserve-3d;

给父盒子添加动画效果

CSS 2D转换 动画 3D转换,css,3d,前端

鼠标放入section 停止动画 

section:hover  {

animation-play-state:paused;

}

四、浏览器私有前缀

1、私有前缀

-moz-: 代表Firefox 浏览器私有属性

-ms-:  代表IE浏览器私有属性

-webkit-:  代表Safari、Chrome私有属性

-o- :  代表Opera私有属性

CSS 2D转换 动画 3D转换,css,3d,前端文章来源地址https://www.toymoban.com/news/detail-849109.html

到了这里,关于CSS 2D转换 动画 3D转换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包