倾斜以及3D动画笔记

倾斜: skew() deg
transform:skew(水平倾斜);
transform:skew(水平,垂直);
transform:skewX();
transform:skewY();
目标伪类选择器：
选择器:target{} 当元素被点击时的指向,发生样式的改变

        css样式 圆角:border-radius:;元素是正方形  宽度的一半px     50% 正圆元素是长方形  较小值的一半px    半圆50% 椭圆

3D：
css3 景深 (3D的空间)
观察物体的时候近大远小

            给父级元素添加:transform-style:preserve-3d;形成3D的空间perspective:800px;添加景深  形成近大远小的效果 900px-1200px设置观察点:perspective-origin:;left right top bottompxbackground:rgba(红,绿,蓝,透明度);a 透明度 取值范围 0-1 背景颜色透明

2d: 水平方向(x轴) 和垂直方向(y轴)
3d: 多了一个z轴
z轴就是你对屏幕垂直的视线,靠近屏幕的方向就是正向,远离屏幕的线是反向

        3D功能函数:3D的位移translateX()translateY()translateZ()3D的旋转rotateX()rotateX()rotateZ()3D的缩放scaleX()scaleY()scaleZ()

动画：
transition:; 过渡需要事件触发

        animation       动画 不需要事件触发,使用关键帧就可以执行1: 定义动画from{}起始位置to{}终点位置0%{}起始位置25%{}过程1...过程n100%{}  终点位置2: 调用动画animation-name:;关键帧名字 动画名animation-duration:;关键帧时长 总运动时间animation-delay:;关键帧延迟时间animation-iteration-count:;运动执行次数 数字   数字为几,执行多少次 默认情况一次 infinite无限循环animation-direction:;动方向reverse 反向运动alternate   单数次,顺时针  偶数次,逆时针alternate-reverse 单数次,逆时针  偶数次,顺时针animation-timing-function:;运动使用的类型(加速 减速 贝塞尔曲线运动...)animation-play-state:; paused  暂停running 运动综合写法:animation:名字 运动时间 速度 延迟时间 次数;

倾斜以及3D动画笔记相关推荐

html笔记（五）2D、3D、3D动画
大标题小节一.2D 1. css3 渐变的语法及应用 2. 动画过渡:transition 3. 2D转换属性:transform 二.3D 1. 3D转换 2. 3D视距 3. 3D翻转方法 4 ...
系统学习iOS动画之六：3D动画
本文是我学习<iOS Animations by Tutorials> 笔记中的一篇. 文中详细代码都放在我的Github上 andyRon/LearniOSAnimations. 到目前 ...
CSS3 3D动画（一）
CSS3 3D动画知识点详解这篇文章的主要内容是关于css3关于新增3d部分的一个解析,那么下一篇内容我们将会进行一个3D相册的一个练习. 由于CSS3的新增还有很多浏览器的不支持,所以我们简单说一 ...
2022-07-06 Unity核心9——3D动画
文章目录一.3D 动画的使用二.动画分层和遮罩三.动画 1D 混合四.动画 2D 混合五.动画子状态机六.动画 IK 控制七.动画目标匹配八.状态机行为脚本九.状态机复用十.角色控 ...
【CSS】770- 多层嵌套的CSS 3D动画技术详解
CSS动画是当前一种非常火爆的技术,我说的并不是一些简单的颜色变换或长短属性变换,我说的是3D变换技术:纯CSS实现的翻滚旋转立方体就是最典型的例子.网上能找到很多关于CSS动画的代码,但对于一个程序 ...
多层嵌套的CSS 3D动画技术详解
CSS动画是当前一种非常火爆的技术,我说的并不是一些简单的颜色变换或长短属性变换,我说的是3D变换技术:纯CSS实现的翻滚旋转立方体就是最典型的例子.网上能找到很多关于CSS动画的代码,但对于一个程序 ...
前端学习-过渡、2d和3d动画
一.过渡(transition) *!display没有过渡效果* 复合写法: transition: css属性过渡效果持续时长过渡的方式延迟时间; 1.语法.属性 //选择过渡效果的cs ...
Unity核心9——3D动画
一.3D 动画的使用使用导入的 3D 动画: 将模型拖入场景中为模型对象添加 Animator 脚本为其创建 Animator Controller 动画控制器(状态机) 将想要使用的相关动 ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...

倾斜以及3D动画笔记

倾斜以及3D动画笔记相关推荐

最新文章

热门文章