css:3D 动画 2D

2D转换

移动：translate

可以改变元素在页面的位置，类似定位

重点：

定义2D转换中的移动，沿着X Y移动

优点：不会影响其他元素

translate中百分比是对于自身元素的translate:(50%,50%)

对行内标签没用

旋转：rotate

指元素在二维平面里逆时针或顺时针旋转

重点：

rotate里面跟度数，单位deg

角度为正时，顺时针。负值，逆时针

默认旋转中心是元素中心点

 

缩放：scale

让元素放大和缩小

transform: scale(x,y);

注意：

x和y逗号分开

transform: scale(1,1)宽和高放大一倍==没有放大

transform: scale(2)==transform: scale(2,2)

transform: scale(0.5,0.5)：缩小

最大优势：可以设置中心点缩放，默认是中心点缩放，而且不影响其他盒子

2D综合写法

同时多个转换，格式为：- 移动：translate、rotate、scale….

顺序会影响其转换效果(先旋转会改变坐标轴方向)

同时有位移和其他属性时，先把位移放在最前面

2D转换总结

转换transform我们简单理解就是变形有2D和3D之分。

我们暂且学了三个分别是位移旋转和缩放。

2D移动translate(x，y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的，可以分开写，比如translateX(x)和translateY(y)。

2D旋转rotate(度数)可以实现旋转元素度数的单位是deg

2D缩放sacle(x，y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子

设置转换中心点transform-origin:x y;参数可以百分比、像素或者是方位名词

当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前。

 

动画

基本使用

先定义动画

再使用(调用动画)

用keyframes定义动画(似定义类选择器)

        @keyframes 动画名称 {

            0% {

                width: 100px;

            }

            100% {

                width: 200px;

            }

        }

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列

在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%

元素使用动画

       div {

            width: 200px;

            height: 200px;

            background-color: aqua;

            margin: 100px auto;

            /* 调用动画 */

            animation-name: 动画名称;

            /* 持续时间 */

            animation-duration: 持续时间;

        }

动画常用属性

属性 描述

@keyframes 规定动画

animation 所有动画属性的简写属性，除了animation-play-state

animation-name 规定动画名称（必须的

animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的）

animation-timing-function 规定动画的速度曲线，默认是ease

animation-delay 规定动画何时开始，默认是0

animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite

animation-direction 规定动画是否在下一周期逆向播放，默认是normal,alternate逆播放

animation-play-state 规定动画是否正在运行或暂停，默认是running,还有paused

animation-fill-mode 规定动画结束后状态，保持forwards回到起始backwards

动画简写属性

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

animation：myfirst 5s linear 2s infinite alternate

 

简写属性里面不包括animation-play-state

暂停动画animation-play-state: paused;经常和鼠标经过等配合使用

让动画走过来，不是跳来：animation-direction: alternate;

盒子结束后，停留结束位置：animation-fill-mode: forwards;

速度曲线细节

animation-timing-function: 规定动画的速度曲线，默认是”ease”

值 描述

linear 动画从头到尾都是匀速

ease 默认。速度以慢开始，加快，结束前慢速

ease-in 动画以低速开始

ease-out 动画以低速结束

ease-in-out 动画以低速结束和结束

steps（） 指定了时间函数中的间隔数量（步长）

 

3D转换

 三维坐标系

X轴：水平向右 注意：X右边是正值，左边是负值

Y轴：垂直向下 注意：Y下面是正值，上面是负值

Z轴：垂直屏幕 注意：往外面是正值，往里面是负值

3D移动 translate3d

3D移动在2D移动的基础上多加了z轴方向。

 

translform:translateX(1080px) :仅仅是在x轴上移动

translform:translateY(100px) : 仅仅是在Y轴上移动

transIform:translateZ(1080px): 仅仅是在Z轴上移动(注意:translateZ一般用px单位)

transform:translate3d(x,y,z) : 其中x、y、z分别指要移动的轴的方向的距离

 

透视 perspective

在2D平面产生近大远小视觉立体， 但是只是效果二维的

如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。

模拟人类的视觉位置，可认为安排一只眼睛去看

透视我们也称为视距：视距就是人的眼睛到屏幕的距离

距离视觉点越近的在电脑平面成像越大，越远成像越小（近大远小）

透视的单位是像素

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

d： 就是视距，视距就是一个距离人的眼睛到屏幕的距离。

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

 

3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿看x轴， y轴，z轴或者自定义轴进行旋转。

 

语法：

transform:rotateX(45deg):沿着x轴正方向旋转45度

transform:rotateY(45deg) :沿看y轴正方向旋转45deg

transform:rotateZ(45deg):沿着Z轴正方向旋转45deg

transform:rotate3d(x,y,z, deg): 沿看自定义轴旋转deg为角度(了解)

 

方向的判断—左手准则

左手的手拇指指向x轴的正方向

其余手指的弯曲方向就是该元素沿着x轴旋转的方向

左手的手拇指指向y轴的正方向

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

 

3D呈现 transfrom-style

控制子元素是否开启三维立体环境。

transform-style:flat 子元素不开启3d立体空间 默认的

transform-style:preserve-3d;子元素开启立体空间

代码写给父级，但是影响的是子盒子

这个属性很重要，后面必用