`### 3D`

`2d: 水平方向(x轴) 和垂直方向(y轴)`

`3d: 多了一个z轴`

z轴就是你对屏幕垂直的视线,靠近屏幕的方向就是正向,远离屏幕的线是反向

`css3 景深 (3D的空间)`

观察物体的时候近大远小

给父级元素添加:

transform-style:preserve-3d;形成3D的空间

perspective:800px;添加景深形成近大远小的效果 900px-1200px

设置观察点:

perspective-origin:;

left right

top bottom

10px 10px

补充： background:rgba(红,绿,蓝,透明度);a 透明度取值范围 0-1 背景颜色透明

`3D功能函数:`

3D的位移

translateX()

translateY()

translateZ()

3D的旋转

rotateX()

rotateY()

rotateZ()

3D的缩放

scaleX()

scaleY()

scaleZ()

`###动画`

与过度的区别：

transition:; 过渡需要事件触发

animation 动画不需要事件触发,使用关键帧就可以执行

`1: 定义动画`

1. from{}起始位置

to{}终点位置

2. 0%{}起始位置

5%{}过程1

...过程n

100%{} 终点位置

`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:名字运动时间速度延迟时间次数;

逆战班 css 3D效果+动画相关推荐

css立体3d效果动画,css3 实现动画，变换基点及3D效果~
各位小伙伴上次分享的爱心感觉如何呀~ 动画效果首先,娜娜在这边给大家认个错,上次分享落下了一个东西,就是动画效果,没有动画是实现不了爱心一条一条的动作的. 虽然那个爱心源代码已经给大家了,只要复制 ...
CSS 3D变形动画属性之逆天立方体叠加动画
上一篇, juejin.im/post/5993d9- 把立方体的盒子搭出来之后,因为怕文章又臭又长(嗯,就是没有想好玩什么效果,偏不告诉你)关于动效没有做更多的处理,只做了一个绕Y轴旋转,这篇试着做 ...
CSS 波浪效果动画波浪起伏水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画
文章目录前言设计思路图例完整代码细节&问题 1. 双伪元素 2.CSS并集选择器 2.position 前言最近在学习前端知识,在做背景的时候想弄一个椭圆的弧形,想到以前网上看 ...
css 3d闪烁动画,CSS3实现闪烁动画效果的方法
本文实例讲述了CSS3实现闪烁动画效果的方法.分享给大家供大家参考.具体方法如下: 给class属性名为className的元素添加闪烁动画效果复制代码代码如下: .className{ -webk ...
css 3D盒子动画
翻转盒子放在父容器中,触发动画的hover绑定在父容器上.否则,在360.搜狗等浏览器中,直接给3D盒子绑定hover,会出现抖动现象. 本例子中,div为盛放3D盒子的父容器,且设置perspect ...
HTML+CSS聚光灯效果动画
首先上效果图: HTML <body><h1>Hello,World!</h1> </body> CSS 1.首先让h1垂直居中满屏显示 *{margi ...
逆战班 css表单笔记合集
千锋逆战表单: <form action="提交地址"> <input> <input type='类型'> type ...
Flutter 绘制 3D 效果动画
前言本篇我们继续介绍 Flutter 绘图的 Path 的应用.Flutter 的 Path 类提供了一个三维空间的变换方法,可以实现路径在三维空间的平移.旋转等操作,从而可以实现3D 绘制的效果. ...
折纸 css_折纸：CSS 3D折叠图像库
折纸 css Space on web pages is growing tighter as mobile development gains in popularity. In response, ...

逆战班 css 3D效果+动画

`### 3D`

`2d: 水平方向(x轴) 和垂直方向(y轴)`

`3d: 多了一个z轴`

`css3 景深 (3D的空间)`

`3D功能函数:`

`###动画`

`1: 定义动画`

`2: 调用动画`

逆战班 css 3D效果+动画相关推荐

最新文章

热门文章

逆战班 css 3D效果+动画

### 3D

2d: 水平方向(x轴) 和 垂直方向(y轴)

3d: 多了一个z轴

css3 景深 (3D的空间)

3D功能函数:

###动画

1: 定义动画

2: 调用动画

逆战班 css 3D效果+动画相关推荐

最新文章

热门文章

`### 3D`

`2d: 水平方向(x轴) 和垂直方向(y轴)`

`3d: 多了一个z轴`

`css3 景深 (3D的空间)`

`3D功能函数:`

`###动画`

`1: 定义动画`

`2: 调用动画`