网站导航
> 文档中心 > 从零开始学前端：形变 --- 今天你学习了吗？（Day21）

从零开始学前端：形变 --- 今天你学习了吗？（Day21）

网友: 文档中心 2022-03-19 15:02:34

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day21）

复习：从零开始学前端：过渡和动画 — 今天你学习了吗？（Day20）

文章目录

  • 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day21）
    • 前言
    • 第二十一节课：形变
      • 一、什么是形变
      • 二、形变的位移属性
      • 三、形变的缩放属性
      • 四、形变的旋转属性
      • 五、练习

前言

快赶上进度了，不过每天除了作业还有别的事情，，之前的学的不扎实，练习也没有独立思考着做。发愁，继续追赶吧。

第二十一节课：形变

一、什么是形变

属于2D/3D上的转换、变形效果。他不是一个动画，他就是变形。比如正方形变平行四边形，再变圆形。都是形状变成另一个形状。但是如果配合上transition/animation，他就会从一个形状变成另一形状。只要有一段时间内的过渡效果，就形成了动画。变形就是通过CSS来改变元素的形状。
使用transform属性来设置元素的变形效果，里面的属性都可以为负数。
其中transform-origin属性确定形变的原点。【transform-origin:0px 0px;】------下面缩放实例有用到
CSS转换（transform）允许您移动、旋转、缩放和倾斜元素。（我们在这里主要给大家介绍这三种）

  • 位置：位移translate（X,Y）；
  • 大小：缩放scale（XX）；
  • 旋转 router（xx deg）；

二、形变的位移属性

  1. transform：translateX()【沿着X轴方向平移】
  2. transform：translateY()【沿着Y轴方向平移】
  3. transform：translateZ()【沿着Z轴方向平移】

注意点：

  • 当我们使用形变位移的时候，如果需要朝两个不同的方向移动，那么这两个方向不能分开写，只能合并写（transform：translateX() translateY()）。或者transform：translate(X,Y)。
  • 我们形变位移只能位移块元素或者行内块元素。
  • 当translate的值为百分数的时候，它的百分比是根据自身。
  • 并且位移之后，元素还是占着原来的位置的。（有点像相对定位，原本位置在，但是看似走了。形象比喻：本体还在，魂飞了，但是只能看到魂魄）
  • 通常使用在页面中鼠标移动上去的效果。

transform：translate（Z）【沿着Z轴方向平移】
Z轴平移，调整Z轴的位置，正常情况下，就调整元素和人眼的距离。【距离越大，元素离人越近，元素就看着越大，实际上元素的实际大小不变】
Z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看的见效果，必须给网页body设置视距（perspective），视距单位使用的是px像素。（需要3d效果的展示，就需要视距）

实例：
原图：
从零开始学前端：形变 --- 今天你学习了吗？（Day21）

X轴：
在这里插入图片描述

Y轴：
在这里插入图片描述

Z轴（注意加perspective，不然看不到效果）：
在这里插入图片描述

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> body{     perspective: 800px; } .box{     width: 200px;     height: 200px;     background-color: pink;     border: 5px solid skyblue;     margin: 50px auto;     overflow: hidden;     transition: .5s; } .box:hover {     transform: translateX(20px);     transform: translateY(20px);     transform: translateZ(100px); }    </style></head><body>    <div class="box">    </div></body></html>

三、形变的缩放属性

scaleX(2)：【水平方向缩放】
scaleY(2)：【垂直方向缩放】
scale(2,2)：双向缩放

注意点：

  • scale缩放都是成倍数缩放的，所以里面的属性值不能加上单位。
  • 当属性值小于1的时候，就是缩小。

实例：
原图：
在这里插入图片描述
缩放：
从零开始学前端：形变 --- 今天你学习了吗？（Day21）
代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> .box{     width: 200px;     height: 200px;     background-color: pink;     border: 5px solid skyblue;     margin: 50px auto;     overflow: hidden; } .box:hover img{     /* transform: scaleX(.5); */     /* transform: scaleY(.5); */     transform: scale(1.2); } img{     width: 200px;     transition: 1s;     transform-origin: 0 0; }    </style></head><body>    <div class="box"> <img src="../../img素材/回眸.jpg" alt="">    </div></body></html>

四、形变的旋转属性

rotateX：【X轴方向旋转】
rotateY：【Y轴方向旋转】
rotateZ：【Z轴方向旋转】
rotate（） 旋转 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转，单位是deg。（1turn表示一圈）

实例1：
原图：
从零开始学前端：形变 --- 今天你学习了吗？（Day21）
X轴旋转：
在这里插入图片描述

Y轴旋转：
在这里插入图片描述

Z轴旋转：
在这里插入图片描述

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> body{     perspective: 800px; } .box {     width: 200px;     height: 200px;     background-color: pink;     border: 5px solid skyblue;     margin: 50px auto;     overflow: hidden;     transition: 1s; } .box:hover {     transform: rotateX(45deg);     transform: rotateY(45deg);     transform: rotateZ(45deg); }    </style></head><body>    <div class="box">    </div></body></html>

实例2：
原图：
从零开始学前端：形变 --- 今天你学习了吗？（Day21）
旋转：
https://www.bilibili.com/video/BV1o34y1r72Z/
代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> body {     perspective: 800px; } .box {     width: 200px;     height: 200px;     background-color: pink;     border: 5px solid skyblue;     margin: 100px auto;     overflow: hidden;     /* linear:匀速运动 */     /* infinite:一直不停的转动 */     animation: run 2s linear infinite; } @keyframes run {     /*      0% {  transform: rotateY(0);     }     100% {  transform: rotateZ(360deg);     } */     from {  transform: rotateX(0) rotateY(0) rotateZ(0);     }     to {  transform: rotateX(1turn) rotateY(1turn) rotateZ(1turn);     } }    </style></head><body>    <div class="box">    </div></body></html>

五、练习

双层3d盒子旋转：
在这里插入图片描述
提示：
一层盒子旋转：
视图：
https://www.bilibili.com/video/BV1qq4y1x7AN/

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>3D盒子旋转</title>    <style> .contain {     /* perspective: 800px; */     height: 200px;     width: 200px;     margin: 200px auto;     position: relative;     animation: girl 5s linear infinite;     transform-style: preserve-3d; } .contain .box {     width: 200px;     height: 200px;     position: absolute;     overflow: hidden; } .contain .box>img {     width: 200px;     /* opacity: .6; */ } .box1 {     transform: rotateY(90deg) translateZ(100px); } .box2 {     transform: rotateY(-90deg) translateZ(100px); } .box3 {     transform: rotateX(90deg) translateZ(100px); } .box4 {     transform: rotateX(-90deg) translateZ(100px); } .box5 {     transform: rotateY(180deg) translateZ(100px); } .box6 {     transform: translateZ(100px); } @keyframes girl {     from {  transform: rotateX(0) rotateY(0) rotateZ(0);     }     to {  transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);     } }    </style></head><body>    <div class="contain"> <div class="box box1">     <img src="./girl/1.jpg" alt=""> </div> <div class="box box2">     <img src="./girl/2.jpg" alt=""> </div> <div class="box box3">     <img src="./girl/3.jpg" alt=""> </div> <div class="box box4">     <img src="./girl/4.jpg" alt=""> </div> <div class="box box5">     <img src="./girl/5.png" alt=""> </div> <div class="box box6">     <img src="./girl/6.jpg" alt=""> </div>    </div></body></html>

请仿照此例子做出双层3d模型：

html:

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>3D盒子旋转</title>    <style> .contain {     /* perspective: 800px; */     height: 300px;     width: 300px;     margin: 150px auto;     position: relative;     /* background-color: pink; */     animation: girl 5s linear infinite;     /* 3D结构 */     transform-style: preserve-3d; } .contain1 {     height: 150px;     width: 150px;     position: absolute;     animation: cutegirl 5s linear infinite;     /* 3D结构 */     transform-style: preserve-3d;     top: 75px;     left: 75px; } .contain1 .box {     margin: 0;     width: 150px;     height: 150px;     position: absolute;     overflow: hidden; } .contain1 .box>img {     width: 150px;     /* opacity: .6; */ } .contain .boxg {     margin: 0;     width: 300px;     height: 300px;     position: absolute;     overflow: hidden; } .contain .boxg>img {     width: 300px;     /* opacity: .6; */ } .box1 {     transform: rotateY(90deg) translateZ(75px); } .box2 {     transform: rotateY(-90deg) translateZ(75px); } .box3 {     transform: rotateX(90deg) translateZ(75px); } .box4 {     transform: rotateX(-90deg) translateZ(75px); } .box5 {     transform: rotateY(180deg) translateZ(75px); } .box6 {     transform: translateZ(75px); } .boxg1 {     transform: rotateY(90deg) translateZ(150px); } .boxg2 {     transform: rotateY(-90deg) translateZ(150px); } .boxg3 {     transform: rotateX(90deg) translateZ(150px); } .boxg4 {     transform: rotateX(-90deg) translateZ(150px); } .boxg5 {     transform: rotateY(180deg) translateZ(150px); } .boxg6 {     transform: translateZ(150px); } @keyframes cutegirl {     from {  transform: rotateX(0) rotateY(0) rotateZ(0);     }     to {  transform: rotateX(-180deg) rotateY(-180deg) rotateZ(-180deg);     } } @keyframes girl {     from {  transform: rotateX(0) rotateY(0) rotateZ(0);     }     to {  transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);     } } .contain:hover .boxg1 {     transform: rotateY(90deg) translateZ(300px); } .contain:hover .boxg2 {     transform: rotateY(-90deg) translateZ(300px); } .contain:hover .boxg3 {     transform: rotateX(90deg) translateZ(300px); } .contain:hover .boxg4 {     transform: rotateX(-90deg) translateZ(300px); } .contain:hover .boxg5 {     transform: rotateY(180deg) translateZ(300px); } .contain:hover .boxg6 {     transform: translateZ(300px); }    </style></head><body>    <div class="contain"> <div class="contain1">     <div class="box box1">  <img src="./cutegirl/c1.jpg" alt="">     </div>     <div class="box box2">  <img src="./cutegirl/c2.jpg" alt="">     </div>     <div class="box box3">  <img src="./cutegirl/c3.jpg" alt="">     </div>     <div class="box box4">  <img src="./cutegirl/c4.jpg" alt="">     </div>     <div class="box box5">  <img src="./cutegirl/c5.jpg" alt="">     </div>     <div class="box box6">  <img src="./cutegirl/c6.jpg" alt="">     </div> </div> <div class="boxg boxg1">     <img src="./girl/1.jpg" alt=""> </div> <div class="boxg boxg2">     <img src="./girl/2.jpg" alt=""> </div> <div class="boxg boxg3">     <img src="./girl/3.jpg" alt=""> </div> <div class="boxg boxg4">     <img src="./girl/4.jpg" alt=""> </div> <div class="boxg boxg5">     <img src="./girl/5.png" alt=""> </div> <div class="boxg boxg6">     <img src="./girl/6.jpg" alt=""> </div>    </div></body></html>

预习：从零开始学前端：css3新属性scss和less — 今天你学习了吗？（Day22）

------岁去弦吐箭。

网络标签：

相关问题