html 和 css学习--（8）_html fa--优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42919657/article/details/103998590

本文介绍了如何使用HTML和CSS3创建具有3D旋转效果的天气预报卡片。内容包括卡片的HTML结构、CSS样式设置，特别是`box-sizing`属性和`position:absolute;`的运用，以及JavaScript实现点击翻转效果的原理和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html 和 css学习--（8）

内容介绍

![Alt]
(https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-c-k-c0xffffffff-no-rj-mo0）
这个学习资源来自于一个youtuber开的频道，名字叫做online tutorial（https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）, 从第一次无意间系统推送给我他的频道的时候我就被他发的一些自创css style深深吸引，也借以这个平台来和大家分享一下一些很有用的学习资源。**

简介

今天介绍的是一个3d旋转的天气预报卡片
在这里插入图片描述

代码

1.首先是做出第一个卡片

html文件

 <div class="card">
        <div class="front active">
            <div class="location">Sydney</div>
            <div class="more"><i class="fas fa-info-circle"></i></div>
            <div class="weather"><i class="fas fa-cloud"></i>
                <h1>8<sup>o</sup><br><span>Today</span></h1>
            </div>

            <ul class="forecast">
                <li>
                    <div class="day">Sunday</div>
                    <div class="temperature"><i class="fas fa-cloud"></i>9<sup>o</sup></div>
                </li>
                <li>
                    <div class="day">Monday</div>
                    <div class="temperature"><i class="fas fa-tint"></i>6<sup>o</sup></div>
                </li>
                <li>
                    <div class="day">Tuesday</div>
                    <div class="temperature"><i class="far fa-snowflake"></i>2<sup>o</sup></i>
                    </div>
                </li>
            </ul>
        </div>
        </div>

以上需要注意的一点在于font-awesome的cdn link，用于我们后面应用里面的一些icon

css 文件

body {
 margin: 0;
 padding: 0;
 font-family: sans-serif;
 /* background-color: red; */
}

.card {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 300px;
 min-height: 400px;
}

.card .front {
 width: 100%;
 height: 100%;
 background: #2196f3;
 padding: 30px;
 box-sizing: border-box;
 transition: .5s;
 transform-origin: right;
}

.location {
 font-weight: bold;
 width: 50%;
 text-align: left;
 float: left;
 color: #fff;
}

.more {
 width: 50%;
 text-align: right;
 cursor: pointer;
 float: right;
 font-size: 24px;
 color: #fff;
 display: block;
}

.weather {
 padding: 50px 0 20px;
 text-align: center;
}

.weather .fas {
 font-size: 80px;
 color: #fff;
}

.weather h1 {
 margin: 0;
 padding: 0;
 font-size: 56px;
 color: #fff;
 line-height: 26px;
}

.weather h1 span {
 font-size: 20px;
}

.forecast {
 margin: 0;
 padding: 0;
}

.forecast li {
 padding: 10px 0;
 border-bottom: 2px solid #fff;
 display: flex;
 font-weight: bold;
 cursor: pointer;
 color: #fff;
}

.forecast li:last-child {
 border-bottom: none;
}

.forecast li .day {
 width: 50%;
}

.forecast li .temperature {
 width: 50%;
 text-align: right;
}

.forecast li .temperature .fas {
 padding-right: 3px;
 box-sizing: border-box;
}

这里我想解释一下box-sizing：border-box的作用，它是在于调节一个被设置宽度的方框在加上padding以后依旧可以以原来的宽度存在，还有运用“last-child”可以指定最后一个li元素

2.做出第二个卡片

html

<div class="back">
            <div class="go-back">
                <i class="fas fa-hand-point-left"></i>
            </div>
            <ul class="forecast">
                <li>
                    <div class="day">Yesterday</div>
                    <div class="temperature"><i class="fas fa-cloud"></i>9<sup>o</sup></div>
                </li>
                <li>
                    <div class="day">Today</div>
                    <div class="temperature"><i class="fas fa-tint"></i>6<sup>o</sup></div>
                </li>
                <li>
                    <div class="day">Tomorrow</div>
                    <div class="temperature"><i class="far fa-snowflake"></i>2<sup>o</sup></i>
                    </div>
                </li>
                <li>
                    <div class="day">Monday</div>
                    <div class="temperature"><i class="fas fa-cloud"></i>9<sup>o</sup></div>
                </li>
                <li>
                    <div class="day">Tuesday</div>
                    <div class="temperature"><i class="fas fa-tint"></i>6<sup>o</sup></div>
                </li>
                <li>
                    <div class="day">Wednesday</div>
                    <div class="temperature"><i class="far fa-snowflake"></i>2<sup>o</sup></i>
                    </div>
                </li>
            </ul>
        </div>

css文件

.card .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 30px;
    background: #ff2877;
    box-sizing: border-box;
    transform-origin: left;
    transition: .5s;
    transform: translateX(100%) rotateY(90deg);
}

.card .back.active {
    transform: translateX(0) rotateY(0deg);
}

.card .front.active {
    transform: translateX(0) rotateY(0deg);
}

.card .front {
    transform: translateX(-100%) rotateY(90deg);
}

.go-back {
    font-size: 24px;
    color: #fff;
    text-align: right;
}

.go-back .fas {
    cursor: pointer;
}

第二个卡片运用“position:absolute;”作用在于与第一个卡片重合，在设置之前，需要先将里面的各种字体提及俩民的子元素的size或者weight 和color调节好，总结的一个比较高效的思路就是从整体回归到个体然后从个体效果到达整体效果，有目的性的去调节每一个东西

这里还有一个“text-align”用来将一整个子元素放置在母元素的右边，它跟float：right有一定的区别，text-align 主要用于元素内部的文本显示，而float主要作用于元素容器的显示位置。

3d 翻转效果，主要原理就是左右移动和内外移动设置， translateX 控制左移效果， rotateY 控制内外效果。
运用javascript,需要加在head部分

 <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.more').click(function() {
                $('.back').addClass('active')
                $('.front').removeClass('active')
            })
            $('.go-back').click(function() {
                $('.back').removeClass('active')
                $('.front').addClass('active')
            })
        })
    </script>

原理很简单就是，设置一个图标被点击后，旋转元素的前后状态，这里需要注意的是，使用addClass以后，在css中定义.active前面不需要加空格。

最后放一下整个head的代码吧


<head>
    <meta charset="UTF-8">
    <title>3D Weather Card</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.more').click(function() {
                $('.back').addClass('active')
                $('.front').removeClass('active')
            })
            $('.go-back').click(function() {
                $('.back').removeClass('active')
                $('.front').addClass('active')
            })
        })
    </script>
</head>

这一期的分享结束啦，希望大家喜欢：）