1000字范文 > 从零开始学前端：形变（小游戏：3D翻滚盒子） --- 今天你学习了吗？（CSS：Day21）

从零开始学前端：形变（小游戏：3D翻滚盒子） --- 今天你学习了吗？（CSS：Day21）

时间：2021-07-19 20:57:59

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

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

文章目录

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

前言

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

第二十一节课：形变

一、什么是形变

属于2D/3D上的转换、变形效果。他不是一个动画，他就是变形。比如正方形变平行四边形，再变圆形。都是形状变成另一个形状。但是如果配合上transition/animation，他就会从一个形状变成另一形状。只要有一段时间内的过渡效果，就形成了动画。变形就是通过CSS来改变元素的形状。

使用transform属性来设置元素的变形效果，里面的属性都可以为负数。

其中transform-origin属性确定形变的原点。【transform-origin:0px 0px;】------下面缩放实例有用到

CSS转换（transform）允许您移动、旋转、缩放和倾斜元素。（我们在这里主要给大家介绍这三种）

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

二、形变的位移属性

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

注意点：

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

transform：translate（Z）【沿着Z轴方向平移】

Z轴平移，调整Z轴的位置，正常情况下，就调整元素和人眼的距离。【距离越大，元素离人越近，元素就看着越大，实际上元素的实际大小不变】

Z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看的见效果，必须给网页body设置视距（perspective），视距单位使用的是px像素。（需要3d效果的展示，就需要视距）

实例：

原图：

X轴：

Y轴：

Z轴（注意加perspective，不然看不到效果）：

代码：

三、形变的缩放属性

scaleX(2)：【水平方向缩放】

scaleY(2)：【垂直方向缩放】

scale(2,2)：双向缩放

注意点：

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

实例：

原图：

缩放：

代码：

<!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：

原图：

X轴旋转：

Y轴旋转：

Z轴旋转：

代码：

实例2：

原图：

旋转：

/video/BV1o34y1r72Z/

代码：

五、练习

双层3d盒子旋转：

提示：

一层盒子旋转：

效果：

/video/BV1qq4y1x7AN/

代码：

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

效果：/video/BV1aT4y1i7KF/

html:

<!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: 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 — 今天你学习了吗？（CSS：Day22）

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。