最新学习CSS3，使用双旋转实现福到了的迎春喜庆特效_css 福，大数据开发岗面试必问-CSDN博客

本文链接：https://blog.csdn.net/2401_84182073/article/details/138761393

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

1、实现思路

其实看上去并不难，首先需要一个喜庆的红色背景，做为我们贴福字的背景大红色；这个大红色的贴纸首先做到第一次旋转；但实现过程中，因为红色背景已经做过旋转，如果福字还在里面做为内部元素来布局，福字肯定会跟着旋转，那么就不好控制；所以我决定将红色纸背景和大福字拆分元素布局，单独对福字进行样式处理，旋转，再进行渲染；更重要的是要将福字与红色背景的居中处理。

2、大红纸的渲染过程

大红纸这块的需求呢，首先是正方形，宽高相等；然后是旋转45度；旋转我们这里采用transform属性，代码如下：

<!-- html部分 -->
<div class="fu-box"></div>

// css部分
.fu-box {
   position: absolute;
   top: 100px;
   left: 100px;
   width: 300px;
   height: 300px;
   background: red;
   transform: rotate(45deg);
}

3、错误的福字布局

开始我想得是将福字元素布局到大红色元素内部，但其实一旦外层布局旋转过45度以后，内部的福字旋转就很没有规律性可言，内部的福字如果想调整到那种福到了的效果，需要做很大程度的调整，代码如下：

<!-- html部分 -->
<div class="fu-box">
    <div class="fu-txt">福</div>
</div>

// css部分
.fu-txt {
    position: absolute;
    top: 37px;
    left: 77px;
    font-size: 180px;
    color: #000;
    transform: rotate(134deg);
}

这段代码虽然也将福字调整到了居中的位置，但top值，left值，和旋转后的rotate值都不如之前预想的那么有规律性

4、正确的福字布局

所以我后来想到，将内部的福字布局和外部的红色纸张布局进行拆分，也就是使用2个div元素进行布局。这样，外部的纸张通过rotate旋转45度，对内部的福字布局就不会造成影响。而内部福字布局也可以根据自己的原点进行旋转布局，这样就有规律的多，进行了180度旋转。

而仍然需要做的就是内部福字和外部纸张的定位显示，这里需要为内部进行absolute绝对定位布局，调整top和left定位即可。代码如下：

<!-- html部分 -->
<div class="fu-box"></div>
<div class="fu-txt">福</div>

// css部分
.fu-txt {
   position: absolute;
   top: 150px;
   left: 162px;
   font-size: 180px;
   color: #000;
   transform: rotate(180deg);
}

最终实现效果如下：

5、完整源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>福到了</title>


![img](https://img-blog.csdnimg.cn/img_convert/58087ca87c79833fe860fbb8ced1d077.png)
![img](https://img-blog.csdnimg.cn/img_convert/2f7c913ed033307ec7684dbb199ef1a5.png)
![img](https://img-blog.csdnimg.cn/img_convert/87e51c59f4761e036aa9246a89a3c211.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**