前端css 2d形变 3d效果大全

2D形变包含的内容是

1.平移
2.旋转
3.缩放
4.拉伸(倾斜)
注意：
1.行元素不能形变，img和input除外
2.仅仅是元素形状的变化，文档流的空间并没有变化

设置形变，使用transform 属性

平移使用 translate

1.水平方向平移 translateX(num) num 是具体值，正数向右平移，负数向左平移
2.垂直方向平移 translateY(num) num 是具体值，正数向上平移，负数向下平移
3.复合写法 translate(x,y)

旋转使用 rotate(度数) 度数的单位是 deg

度数为正，顺时针旋转
度数为负，逆时针旋转
形变的层级，后来者居上
使用transform-origin 属性，设置形变的参考点
默认值是center center
transform-origin:x轴方向的位置 Y轴方向的位置
值
1.具体的数值
2.left top right bottom center 等方向名词的组合，如果只写一个词，另一个默认是center

缩放使用 scale(x轴方向的倍数，y轴方向的倍数)

如果X轴和Y轴的缩放倍数相同，则可以只写一个scale(n)
如果需要把形变组合在一起

transform: scale(2) rotate(180deg) translate(30px,50px);(缩放 旋转 平移)

设置倾斜 skew()

写法和 translate 一样，分为X轴倾斜，Y轴倾斜和复合写法
skewX(n+deg) 元素倾斜，就是元素和Y轴的夹角为n度
X轴的度数为正，向左倾斜
X轴的度数为负，向右倾斜
Y轴同理
注意，度数不能是90度，使用复合写法，他们的和不能为90
如果同时设置 平移和缩放，有两种方法
1.先写平移，然后在缩放，他的结果是 先平移到具体位置，然后在该位置上执行缩放
2.先写缩放，然后在平移，他的结果是把所有的值进行缩放，然后按照缩放后的值平移
一般都用第一种写法

过渡动画

设置元素从一种状态达到另一种状态的动画效果
设置属性是 transition

• transition-property 设置需要过度的css属性，如果有多个属性需要过度，则可以用英文逗号分开
• 也可以直接设置all，all表示所有变化的css属性都需要过度，如果不设置该属性，默认为all
• transition-duration 设置过渡动画的持续时间单位是秒(s)
• transition-delay 设置过度动画的延迟时间，动画开始的时候有延迟，结束的时候也有延迟
• transition-timing-function 设置动画的变化曲线
  ease 默认值，先快后慢
  linear 匀速运动
  ease-in 淡入效果，先快后慢
  ease-out 淡出效果，先匀速，在快，后慢
  ease-in-out 淡入淡出，两边慢，中间快
  以上均属于贝塞尔曲线中的特殊曲线

过渡动画也可以合写：

  transition:property duration timing-function delay;

后面两个可以省略，直接设置默认值

过渡动画的触发时机：过渡动画不会主动触发！
触发方式：
1.通过伪类触发 hover focus targetsd
2.媒体查询
3.通过js触发

 /* 设置过渡动画绑定的css属性 */
 transition-property: width,height,margin-top,background;
 /* 设置过渡动画的持续时间 */
 transition-duration:2s;
 /* 设置过度动画的延迟时间 */
 transition-delay:1s;
 /* 设置动画的变化曲线 */
 transition-timing-function:icubic-bezer(0.175, 0.885, 0.32, 1.275);
 transition-timing-function:ease;

案例地球围着太阳转
代码如下：

.wp1,.wp2{
  width: 100px;
  height: 100px;
  box-shadow: 10px 10px 30px 5px #f60 inset;
  display: inline-block;
}
.wp1{
  background:rgb(6, 180, 249);
  border-radius: 50%;
  margin-right: 50px;
  box-shadow: 0 0 20px 5px rgb(34, 6, 250) inset;
  transition: all 3s;
  /* 设置形变(旋转)的参考点 */
  transform-origin:400px 0px;
}
.wp1:hover{
  /* 旋转 */
  transform: rotate(360deg);
}
.wp2{
  border-radius: 50%;
  border: none;
  margin: 300px 0 0 200px;
  background:radial-gradient(50px at center,#ff0 10%,#f60 90%);
  box-shadow: 0 0 10px 10px rgb(248, 43, 43);
}
<div class="wp1"></div>
<div class="wp2"></div>

3D形变

设置3D环境

perspective :景深
他的默认值是 none
需要把景深perspective 设置在3D环境的父级上
他的值是具体的数值，不可以是百分比，因为z轴没有百分比
也不能是0 或者是负值

使用transform-style 设置3D效果
默认值是 flat，表示2D
preserve-3d 表示3D

使用 perspective-origin 设置透视点的位置
1.可以是 left top right bottom center 等方位名词组合
2.可以是具体的数值
3.可以是百分比

以上三个关于3d设置的属性都设置在 3d环境的父级上
例：

/* 设置景深 */
perspective: 2000px;
/* 设置3D效果 */
transform-style: preserve-3d;
/* 设置透视点 */
perspective-origin: 0 0;

平移可以使用translate3d(x,y,z);也可以单独使用 translateZ(z)

3d旋转

• 分开写法
  rotateX(num):
  num为正,以上边为基准线，上边往视窗的里面翻转。
  num为负,以上边为基准线，上边往视窗的外面翻转
  rotateY(num)：
  num为正,以左边为基准线，左边往视窗的外面翻转。
  num为负,以左边为基准线，左边往视窗的里面翻转
  rotateZ(num)
  rotate3d(num)
• 合写
  rotate3d(x倍数,y倍数,z倍数,度数)
  例：rotate3d(1,2,3,40deg)
  意思是：x轴旋转40度，Y轴旋转80度，Z轴旋转120度

查看元素翻转后能否看到元素的内容
backface-visibility
值
1.visible 默认值，能看到
2.hidden 不能看到

/* 翻转之后能否看到 */
backface-visibility:visible;

关键帧动画

关键帧动画和过渡动画的区别
1.关件帧动画的触发时机是，只要添加关键帧动画，就会立即执行动画
2.关键帧动画可以对动画的流程进行控制

关键帧动画的使用流程
1.需要先封装一组关键帧动画，使用关键字 @keyframes
2.给需要设置动画的元素，添加动画属性

一、设置动画名称
animation-name：值是通过@keyframes 声明的名称
二、设置动画的持续时间
duration:10s

以上两个属性，不能省略

三、设置动画的运动函数
animation-timing-function：值和过度函数一致都是贝塞尔曲线设置的函数
四、设置动画的延迟时间
animation-dealay:10s
五、设置动画的重复次数
animation-iteration-count:num；
值可以是一个正整数，表示次数，默认为一次，也可以是 infinite 表示无限次数
六、设置动画的方向
animation-direction
值
normal 默认值，正方形运行
reverse 反方向运行
alternate 当运行次数是奇数时，正方向运行；偶数时，反方向运行
alternate-reverse 当运行次数是奇数时，反方向运行；偶数时，正方向运行
七、设置动画最后一帧的状态
animation-fill-mode
值
forwards 以动画的最后一帧作为动画的最后呈现状态
both ： 状态和 forward相同
backwards 默认值，以动画开始时候的第一帧作为动画的最后呈现状态

合写：

animation:name duration timing-function delay iteration-count direction fill-mode;

合写的时候，除了 name duration 不能省略，其他均可视情况省略

控制动画的播放状态(:hover 鼠标悬停时)
animation-play-state
值
paused 暂停
running 运动

/* 设置动画名称 */
 animation-name: move;
 /* 设置动画持续时间 */
 animation-duration: 2s;
 /* 设置动画的运动函数 */
 animation-timing-function: ease-in-out;
 /* 设置动画的重复次数 */
 animation-iteration-count:2;
 /* 设置动画的方向 */
 animation-direction:alternate-reverse;
 /* 设置动画最后一帧的动态 */
 animation-fill-mode:forwards;
 /* 合写,前两个不能省，后面都可以省略 */
 animation: move 2s infinite;
.wp:hover{
 /* 控制动画的播放状态 */
 animation-play-state: paused;
}
@keyframes move {
 from{
     left: 0;
 }
 to{
     left: 400px;
 }
}

小路太阳落山

这个案例在我上传的视频里可以看到动画效果，实现代码如下：

body{
    background-color: #91c9d8;
    animation:he 5s linear forwards;
}
.wp{
    height: 650px;
    overflow: hidden;
}
.sun{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background:radial-gradient(50px at center,#ff0 10%,#f60 90%);
    box-shadow: 0 0 10px 10px rgb(248, 43, 43);
    position: relative;
    left: 90%; top:20px;
    animation: luo 5s linear 1 forwards;
}
.qiu{
    width: 500px;
    height: 300px;
    border-radius: 100px;
    background: rgb(61, 204, 171);
    position: relative;
    left: 70%;
    top: 250px;
    transform: rotate(-5deg);
}
.shan1{
    height: 500px;
    width: 500px;
    border-radius: 5%;
    background: rgb(205, 203, 202);
    transform: rotate(45deg);
    position: relative;
    /* left: 10%; */
    top: -150px;
}
.shan{
    width: 800px;
    height: 800px;
    border-radius: 5%;
    background: rgb(133, 163, 133);
    transform: rotate(45deg);
    position: relative;
    left: 25%;
    top: -700px;
}
.case{
    height: 100px;
    background: linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,
    #04be02 20%,#04be02 100%) repeat-x;
    background-size: 20px 20px;
    position: relative;
    top: -1280px;
}
.fff{
    height: 20px;
    background: #e2e1e1;
    position: relative;
    top: -1360px;
}
.lu{
    height: 200px;
    background: #384072 linear-gradient(90deg,#fff 0,#fff 50%,transparent 50%
    ,transparent 100%) repeat-x 0 center;
    background-size: 150px 20px;
    position: relative;
    top: -1360px;
}
.car{
    position: relative;
    top: -1600px;
    animation: run 4s linear infinite;
}
.lun1{
    position: absolute;
    left: 20px;
    top: 65px;
}
.lun2{
    position:absolute;
    left: 190px;
    top: 65px;
}
.lun1,.lun2{
    transition: all 8s;
    animation:rotate 0.5s linear infinite;
}
@keyframes rotate {
    from{
        transform: rotate(0);
    }
    to{
        transform: rotate(360deg);
    }
}
@keyframes run {
from{
    left: 0;
}
to{
    left: 1000px;
}
}
@keyframes luo {
from{
    top: 20px;
    left: 90%;
}
to{
    top: 300px;
    left: 40%;
}
}
@keyframes he {
from{
    background: #91c9d8;
}
to{
    background:#000;
}
}
</style>
</head>
<body>
<div class="wp">
<div class="sun"></div>
<div class="qiu"></div>
<div class="shan1"></div>
<div class="shan"></div>
<div class="case"></div>
<div class="fff"></div>
<div class="lu"></div>
<div class="car">
<img src="./images/che.png" alt="">
<img class="lun1" src="./images/lun.png" alt="">
<img class="lun2" src="./images/lun.png" alt="">
</div>
</div>
</body>