若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。

一、transform-origin

transform-origin 用于更改当前元素的中心点，使元素在根据中心点做一些动效使做出更多的姿态。

transform-origin 表示当前元素的基点，使用 transform-origin 可以对目标元素的基点进行设置，在 3D 效果中，transform-origin 可以灵活运用制作出非常舒服的动态效果，给你的页面增加不少的分数。

以下是一个基础的 transform-origin 示例代码：

<!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>动画重点</title><style>.main-box {width: 100%;height: 100%;text-align: center;}.base-point {transform-origin: 0px 0px;display: inline-block;width: 300px;height: 300px;background-color: brown;transition: transform 1s;}.base-point:hover {transform: rotate(30deg);}</style>
</head><body><div class="main-box"><div class="base-point"></div></div>
</body></html>

rotate

在以上的示例中，main-box 用作对主要 div 进行设置，设置其高宽以及其内容水平对齐方式，在此设置水平对齐为居中；随后样式 base-point 用于设置其 main-box 包裹的 div ，设置其 div display: inline-block;，此样式使其能够居中显示，随后设置了宽高、背景色以及过度效果 transition，transition 所监听的变换是 transform，时间是一秒，transform 在之后用于 rotate 旋转角度：

此时基本情况我们已经了解，现在查看 transform-origin: 0px 0px;，这段样式表示设置调用该类的元素的原点在左上角，因为其值为 0px 0px，其中第一个 0px 表示 x，第二个 0px 表示 y，那么我们查看一个 div：

该 div 左上角的位置则是 0px 0px，x 越往右越大，y 越往下越大；接着查看样式 base-point:hover 鼠标悬浮后，使用 transform 设置其元素旋转 45 度，其中 deg 为单位，效果如下：

此时我们可以看到，左上角为一个轴心点，而这个轴心点则是我们定义的基点。

此时我们还可以使用 scale 对其进行缩放，scale 接收两个值，一个是 x 和一个 y，缩放取值0-1之间，若大于 1 则是放大，样式修改如下：

<style>
.base-point:hover {transform: scale(1.2, 1.5);}
</style>

效果如下：

此时依旧依照左上角进行缩放，我们可以换成右上角，xy 值为 300px 0：

效果如下：

此时我们还可以使用百分比定义基点位置：

此时我们可以给予该元素距离定点一定距离，设置基点为中心（其实基点直接说中心点可能较为容易理解）：

随后效果如下：

transform-origin 除了xy外还有另外一个参数 z，z 表示 z 轴，完整语法：transform-origin: x-axis y-axis z-axis;

需要搞清楚 z 的意思我们先从 rotate、translate 的 3D 值开始。

二、rotate3d

rotate3d：rotate3d() CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义;
如果为正，运动将为顺时针，如果为负，则为逆时针。（摘抄）

旋转轴由一组 [x, y, z] 矢量定义，如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果。

空间位置

首先我们得搞清楚这个矢量在CSS 3D转换是什么，矢量在物理学中称作矢量，在数学中称作向量，而咱们使用 rotate3d() 函数输入的 x y z 则是一个矢量位置，矢量位置则是原点（0，0，0）到这个终点的距离。

默认状态下 x y z 为0，在 rotate3d() 中有规定，空值（就是全部xyz值为0）时将会不生效：

<!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>动画重点</title><style>.main-box {width: 100%;height: 100%;margin-top: 300px;text-align: center;position: relative;}.box1,.box2 {position: absolute;width: 300px;height: 300px;display: inline-block;transition: transform 1s;}.box1 {/*transform: rotateY(60deg);*/background-color: brown;}.box1:hover {transform: rotate3d(0, 0, 0, 90deg);}</style>
</head><body><div class="main-box"><img class="box1" src="./img/img05.jpg" /></div>
</body></html>

接着，咱们使第一个 0，也就是 x 表示沿 x 轴进行旋转，若用一个正方体做比方，此时该点应该是在此位置：

效果如下：

我们再把 y 值更改为 1，然后其他值归零：

Z轴：

由此我们可以看出，期中心点在元素中间：

而其中的角度正值表示顺时针旋转，负值表示逆时针旋转，旋转方式如图所示：

从图中我们可以得知，我们以箭头方向形成一个平面，这个平面的顺时针则是该轴角度为正是的顺时针方向。

复杂旋转

此时我们更改 rotate3d 为：

那么此时将会自定义轴，该轴为改点位置与圆心位置连成的直线：

根据该轴进行旋转

若此时将值改成（1，2，0）：

那么对应所产生的轴也会发生变化：

最终的旋转效果如下：

此时我们可以对比，其依照的轴已经发生变化。若此时改动转动位置：

在空间中位置（画得丑，自己可以画一下）将会有一个延伸出来的 3D 轴，那么此时的转动有了 z 轴的参与将会变得更像往下
“盖住”的翻转：

效果如下：

三、使用 CSS 做一个 3d 盒子

为了更好的演示 3d 相关内容，在此使用 css 制作一个 3D盒子。

首先先创建一个 div 使其包裹对应的3d 盒子，在此需要给予一个样式，使其居中并且有一定的 margin ，否则显示起来并不会利于查看：

<style>
.container {width: 100%;margin: 200px auto;text-align: center;
}
</style>

接着在 body下编写 div，使其调用该样式：

<div class="container">
</div>

接下来为 3d 盒子创建一个主要的父容器进行包裹，给予样式；因为我们的外部容器设置了 text-align ，那么其内元素需要居中则需要使用 display 设置 div 为其他类型元素，在此设置为 display: inline-block;，由于在创建 3d 盒子时，需要对其内部进行脱离文档流，需要设置其 postion 为 relative，为其具有 3d 效果在设置 transform-style 为 preserve-3d，在给予对应 background-color ，最后设置其宽高：

<style>
.box {display: inline-block;width: 200px;height: 200px;position: relative;transform-style: preserve-3d;background-color: brown;}
</style>

整体代码如下：

此时页面效果如下：

接着，该div这是用于包裹 3d 盒子，在此我们制作3d 盒子是通过对 div 进行翻转，我们需要在这个 div 下创建 6 个 div 表示其 6 个对应的面，并且这 6 个面必须有一定的大小，在此创建一个样式为其设置宽高，以及对应的 position：

接着我们先创建第一个 div 并且调用其样式：

由于每一个面使用不同颜色方便区分，在此我们给予一个背景颜色：

此时页面显示如下：

此时再复制一个 div 作为左侧的盒子面，并且给予对应的背景色：

在此我们可以看到，在给予对应颜色时还使用了 rotate3d 毒气进行沿着 y轴进行转化，但此时页面由于是正视关系，所以看不见，需要移动柜整个盒子的父容器，所以在此我们在 box 样式中添加转动：

此时页面显示如下：

此时我们应该想到，直接使用中心点转化即可完成当前页面的转动使其归于正确的位置：

改变对应的中心点，使其沿着最左侧 Y 轴进行旋转即可完成，效果如下：

接着我们创建右侧的面，一样是创建一个 div，增加一个样式后更改其对应的中心点以及旋转角度进行转换：

效果如下：

此时我们发现当前 3d 盒子有些面不方便查看，直接给予 box 一个 hover，使其可以转换，首先在 box 中增加一个过渡，使其 hover 时能够更好的观察其他面：

接着再编写对应的 hover：

效果如下：

此时被遮挡的区域已经可视，此时咱们继续增加对应的 div 和样式为其增加面，首先制作后面的面，只需要使用 translate 在 Z 轴往后平移与其宽度一样的值即可：

效果如下：

再接着制作 top 和 bottom 的面即可，原理跟以上类似，不过转化轴发生了改变而已，完整代码如下：

<!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 Box 1_bit</title><style>.container {width: 100%;margin: 150px auto;text-align: center;}.box {display: inline-block;width: 200px;height: 200px;position: relative;transform-style: preserve-3d;background-color: brown;transform: rotate3d(1, 1, 0, 65deg);transition: transform 1.6s;}.box:hover {transform: rotate3d(1, 1, 0, 265deg);}.plane {width: 200px;height: 200px;position: absolute;}.plane-before {background-color: chocolate;}.plane-left {background-color: crimson;transform-origin: 0% 0%;transform: rotate3d(0, 1, 0, 90deg);}.plane-right {background-color: rgb(220, 20, 203);transform-origin: 100% 100%;transform: rotate3d(0, 1, 0, -90deg);}.plane-bottom {background-color: rgb(20, 80, 220);transform-origin: 100% 100%;transform: rotate3d(1, 0, 0, 90deg);}.plane-top {background-color: rgb(240, 113, 45);transform-origin: 0% 0%;transform: rotate3d(1, 0, 0, -90deg);}.plane-after {background-color: rgb(220, 20, 20);transform: translateZ(-200px)}</style>
</head><body><div class="container"><div class="box"><div class="plane plane-before"></div><div class="plane plane-left"></div><div class="plane plane-right"></div><div class="plane plane-after"></div><div class="plane plane-bottom"></div><div class="plane plane-top"></div></div></div>
</body></html>

最终效果如下：

四、scale3d 使用

有了 3d盒子后可以更好的对 3d 盒子进行 Z 轴上的演示。scale3d 接收 x、y、z 3个轴的值作为参数，我们在此演示 z 轴。

在此将 box 的 hover 样式更改为对应的 scale3d：

在此需要注意，其旋转内容保持不变，否则将会 hover 后变成未旋转，x和y为1表示 x y 轴上缩放不变，z 轴增加，效果如下：

CSS3 做一个旋转的立体3D正方形动效核心【前端就业课第二阶段】CSS 零基础到实战（07）相关推荐

教你用CSS3做一个旋转的宇宙星球
教你用CSS3做一个旋转的宇宙星球可能略有瑕疵,无非就是先画一个圆圈,把小球定位到上面,然后再让圆圈旋转即可直接上效果图代码 <!DOCTYPE html><html lang ...
如何用css3做一个旋转的魔方
代码: 效果图
[css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
用css3做一个模拟火箭飞行的简单动画。
用css3做一个模拟火箭飞行的简单动画,图片我特意上传到了图床,你也可以试试. 效果大概是这样: 需要的知识点: 知道css的transform,transition,animation属性和定义动画 ...
css3 做一个会动的菜单 menu 按钮动画效果
css3 做一个会动的菜单 menu 按钮动画效果需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo. 设计师给了俩图片,一个是三这样的菜单图标 ...
html语言制作带样式的表格,html制作一个复杂表格 html5/CSS3做一个表格
table td{width: 100px;padding: 5px;}DataDataDataDataDataDataDataDataDataDataDataDataDataDataData 用HT ...
利用css样式表做一个旋转写轮眼
利用css样式表做一个旋转写轮眼成品效果图首先分析效果图图中有红色背景圈和里面的三个椭圆和最中心的黑圈组成. 因此,我们应该写一个大的div盒子,来装这三个椭圆div,里面的三个椭圆div和圆的 ...
用html和css做一个旋转的正方体
用html和css做一个旋转的正方体 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
css旋转按钮制作,css3 旋转按钮使用CSS3创建一个旋转可变色按钮
想把访客引到另一个页面?添加一个很炫的按钮是个很好的办法 !今天的文章提出了如何使用css3创建一个旋转,旋转,可变色按钮. 这是一个演示旋转的css3按钮.让我们先从html: 复制代码代码如下: ...

CSS3 做一个旋转的立体3D正方形动效核心【前端就业课第二阶段】CSS 零基础到实战（07）

一、transform-origin

rotate

二、rotate3d

空间位置

复杂旋转

三、使用 CSS 做一个 3d 盒子

四、scale3d 使用

CSS3 做一个旋转的立体3D正方形动效核心【前端就业课第二阶段】CSS 零基础到实战（07）相关推荐

最新文章

热门文章

CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战（07）

一、transform-origin

rotate

二、rotate3d

空间位置

复杂旋转

三、使用 CSS 做一个 3d 盒子

四、scale3d 使用

CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战（07）相关推荐

最新文章

热门文章

CSS3 做一个旋转的立体3D正方形动效核心【前端就业课第二阶段】CSS 零基础到实战（07）

CSS3 做一个旋转的立体3D正方形动效核心【前端就业课第二阶段】CSS 零基础到实战（07）相关推荐