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

已于 2022-04-19 17:37:16 修改
阅读量1k 收藏
点赞数
分类专栏： 从零开始学前端 文章标签： 前端 学习 css html
于 2022-02-24 14:04:14 首次发布
本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45266979/article/details/123104058
版权

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

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

文章目录

前言

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

第二十一节课：形变

一、什么是形变

属于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效果的展示，就需要视距）

实例：
原图：
在这里插入图片描述

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的时候，就是缩小。

实例：
原图：
在这里插入图片描述
缩放：
在这里插入图片描述
代码：

<!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轴旋转：
在这里插入图片描述

代码：

<!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：
原图：
在这里插入图片描述
旋转：
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模型：
效果：https://www.bilibili.com/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）

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

Coisini_甜柚か
关注
专栏目录
前端如何快速上手 Web 3D 游戏的开发
阿里云云栖号
10-10 2467
简介：本文以「余额宝3D跑酷游戏」为例，介绍了前端如何快速上手 Web 3D 游戏的开发。 作者 | RichLab楺楺 诚空 本文以「余额宝3D跑酷游戏」为例，介绍了前端如何快速上手 Web 3D 游戏的开发。跑酷游戏是余额宝七周年的主玩法，用户通过做任务来获取玩游戏的机会并且解锁游戏道具，从而在游戏中获得更多的金币，最终可以利用金币兑换一些权益，同时我们也在游戏中植入了一些礼包，先看看具体效果。 游戏设计 我们把游戏的3D场景分成了三大模块，分别是赛道、金币（道具）和人物。 赛道..
前端动画——3D立方体盒子
果冻
05-10 588
前言 学动画的时候看到的，很有意思，有兴趣可以看全文 CSS 怎样写一个动画（从基础动画到3d动画) 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
web前端开发盒子套盒子问题
Cathy___Sun的博客
09-10 1649
web前端块级元素和行内元素
前端练习--3D盒子背景图运动效果
comegoing_xin_lv的博客
09-02 542
3D盒子运动效果
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
星辰迷上大海的博客
05-09 3013
CSS常用之相对定位和绝对定位的区别，
前端必修技能：高手进阶核心知识分享 - 三万字帮你搞定CSS动画(形变动画、过渡动画、关键帧动画）
uu0216的博客
07-11 2328
transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。注意： 使用此属性必须先使用transform属性。transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果，比如从一种颜色渐变到另一种颜色，或者从隐藏到显示。transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。
前端必修技能：高手进阶核心知识分享 - CSS 阴影属性详解
uu0216的博客
07-07 858
drop-shadow滤镜可以接受 (shadow)属性除了"inset"关键字的其他值。 (必须) 这是设置阴影偏移量的两个 值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位. 如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果).
前端必修技能：高手进阶核心知识分享 - CSS 选择器
uu0216的博客
07-22 953
CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的 HTML 元素。CSS 选择器用于选择你想要的元素的样式的模式。看了上面的图，你发现就算你不知道选择器名字叫什么，属于哪一种，但不知不觉的，你其实已经习惯了其中的很多种选择器的使用。嘿嘿，这就是我现在的状态。看了这图之后，你是不是有一种感慨呢？选择器太多了，到底该怎么用呢？
MATLAB用拟合出的代码绘图-shape-toolbox:形变模型的例程
05-21
从一系列2D或3D图像中学习形状参数（即平均形状（或模板）和变形的主要空间）作为图形模型中的最大后验推断问题。 该存储库包含用Matlab编写的核心功能和可执行脚本。 独立发行 待办事项-尚无此版本 我们提供了无需...
前端必修技能：高手进阶核心知识分享 - CSS伪类和伪元素
uu0216的博客
07-19 1086
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。 伪类选择器和伪元素选择器虽然不是真正的元素，但它们在CSS中扮演着极其重要的角色。了解并熟练运用它们，可以让你的网页更加生动、互动性更强，同时也能更好地控制页面的布局和内容的表现。
纯css实现3D立方体
hhzzcc_的博客
04-04 3670
纯css实现3D立方体特效，通过3D旋转和平移原理实现，话不多说直接贴代码&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; body,html{ margin: 0; } body{ display: flex; ...
web前端进阶＜7＞：3d图像翻转效果
aiwanchengxu的博客
12-05 1899
这几天又闲着无聊，自己学的东西又有一点不牢固了，需要写一个小程序来巩固一下，相信大家也时有同感吧！那么这一期就给大家带来一个炫酷的相册3d翻转效果，如果搭上炫酷的文字和动画那肯定是高端、霸气上档次的：前面我也给大家制作过一个很常见的3d旋转相册： (168条消息) web前端进阶:＜2＞转换的补充、动画和小案例_编程学渣ズ的博客-CSDN博客_前端动画小案例https://blog.csdn.net/aiwanchengxu/article/details/124586701这个小案例是网上非常常见的一个小
使用THREE.js制作一款3D游戏
weixin_33717298的博客
10-05 4967
使用THREE.js制作一款3D游戏 本文是基于某位大神使用three.js设计游戏的学习心得与知识分享 The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js 前言 这个学期选修了一门计算机图形学的课程，课程选用的教材是基于WebGL。在此之前我对计算机图形学是没有任何概念的，只知道如果想要设计一款游戏具有图形学...
基于HTML5及WebGL开发的2D3D第一人称漫游进行碰撞检测
HT for Web 3D
10-18 2812
以前用原生JS写的场景+第一人称漫游模式+碰撞测试那代码量是真的庞大，这次我想要用HT for Web来写一个轻量的场景小游戏，而且3D 2D都能玩，才200行，真的是太轻松了~还有通过监控属性的变化来操作也是一个很方便的功能，我相信没有几个人能轻量，快速地开发出场景小游戏的，而且浏览器操作还很流畅！
css之伪类hover改变自身、子元素、其他元素的样式
博哥的二进制世界
08-25 3543
css之伪类hover改变自身、子元素、其他元素的样式前言hover改变元素自身样式hover改变子元素样式hover改变其他元素样式 前言 有时候我们想在鼠标移动到元素上的时候，改变自身、子元素、其他元素的css样式，除了通过js事件的方式实现外，还可以通过纯css实现，即通过伪类hover改变自身、子元素、其他元素的样式 hover改变元素自身样式 <div class="father1"> <div class="son1"> </div> </div&g
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1110
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 452
Vue根实例、实例总结
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1167
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
登录功能开发 P167重点
2303_81204446的博客
09-30 417
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
PS-InSAR技术在矿区形变监测中的应用：形变区域与速率分析
"该研究应用永久散射体差分干涉测量技术(PS-InSAR)对河南省鹤壁市四个煤矿的形变进行了分析，通过2008年至2010年的12景ENVISAT ASAR数据，揭示了矿区的形变特征。研究发现6个显著的形变区域，其中最大的形变量达到60...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coisini_甜柚か

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值