当前位置: 首页 > article >正文

CSS 2D转换 3D动画 3D转换

目录

2D转换(transform):

移动translate:

旋转rotate:

缩放scale:

CSS3动画(transform):

动画常用的属性:

将长图片利用盒子实现动画的效果:

3D转换:

透视perspective:

旋转rotate3d:

3D呈现transform-style:


2D转换(transform):


2d转换的综合写法:

注意:先旋转和位移,有影响最终位置效果。


移动translate:

translform:translatex(100px):仅仅是在x轴上移动

translform:translatey(100px):仅仅是在y轴上移动

如果使用的参数是百分比,则移动的距离参数是按照盒子自身来移动的。

让盒子实现水平居中:以前是定位:然后用子绝父相,left:50%(是父类的一半使其中心轴和父类一条线) margin-left:子类的一半。

left可以对应为right。

left top等之后在posiion:定位下才会变为移动的。

旋转rotate:

默认得旋转中心是元素得中心。

实现:点击后三角的变化。

正方形,本身进行旋转45,在鼠标悬停时,过度一个悬停旋转度数。

使用transform-origin:属性来实现改变旋转的中心点

缩放scale:

这里的是倍数。

这里区别于直接设置宽和高:直接设置时,他是依照上边框为基线,向左右,下进行放大缩小的。 会影响其他盒子的布局

scle:的优点在于,它不会影响其他盒子的布局。 而且可以设置缩放的中心点。默认是元素的中心

同样使用transform-origin:属性来设置缩放的中心点。、


CSS3动画(transform):

一个元素可以添加多个动画,只要用逗号分隔即可。


动画序列: 用来实现多段的动画变换。

实质是在0到100过程中实现不同百分比时,实现不同的进程

但要注意transform怎么进行的。

这个比分比是总时间的百分比。

动画常用的属性:

animation-play-state:是指当鼠标在动画上是是否暂停。 但注意在简写形式中需要写在悬停中。

速度曲线:

这里steps值实现了动画分几步完成,就不需要在动画定义中写多个百分比了只写0 100即可


动画简写:


通过动画可以实现类似热点图的效果:

思路:通过圆,将其逐渐变大。 一般会将圆放在盒子中。 但注意有多个波纹,要多个小盒子间隔变化。 注意动画顺序时间的设置。


将长图片利用盒子实现动画的效果:

3D转换:


xyz不能省略,没有就写0;

透视perspective:

想要3d效果必须要有透视。

旋转rotate3d:

deg和度数单位等价,只是在这里只能写deg。

3D呈现transform-style:


但要注意实现这种盒子时,注意由于盒子旋转中心的因素导致图像效果。

如这个本来是竖直,变换到底部的。这时默认旋转是竖直的中心,此时应将下面的盒子移动到前面。



http://www.kler.cn/a/234896.html

相关文章:

  • 使用 AI 辅助开发一个开源 IP 信息查询工具:一
  • android studio更改应用图片,和应用名字。
  • JavaWeb期末复习(习题)
  • springboot中的AOP以及面向切面编程思想
  • Java图片拼接
  • 【C++11】可变模板参数
  • ###C语言程序设计-----C语言学习(12)#进制间转换,十进制,二进制,八进制,十六进制
  • K8S之运用节点选择器指定Pod运行的节点
  • SERVLET间通信
  • vue父组件监听子组件是否加载完毕通过ref调用子组件的函数
  • 940. 不同的子序列 II
  • C语言——oj刷题——模拟实现库函数strlen
  • Solidworks:平面工程图练习
  • Netty应用(七) 之 Handler Netty服务端编程总结
  • 【北邮鲁鹏老师计算机视觉课程笔记】05 Hough 霍夫变换
  • ChatGpt报错:We ran into an issue while authenticating you解决办法
  • 【Java】笔记:JDBC中Statement常用的几个执行函数
  • Linux中FIFO管道
  • 第六篇【传奇开心果系列】Vant of Vue 开发移动应用示例:深度解析响应式布局支持
  • acwing14期周赛---------安排时间(贪心+枚举)
  • STM32控制JQ8400语音播报模块
  • JavaScript 设计模式之外观模式
  • CSS盒子的概念
  • 《UE5_C++多人TPS完整教程》学习笔记8 ——《P9 访问 Steam(Acessing Steam)》
  • 2021年通信工程师初级 实务 真题
  • 刘谦春晚魔术的数学原理