当青训营遇上码上掘金

题目

主题 1：我的名片

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

前言

总的构思实想实现一个类似于百叶窗的效果，所以这里最大的一个点在于旋转属性的使用。由于css可以完全实现这个想法，这里就采用纯css来实现 由于写的时候随手一调，发现他真的很像发霉的火腿肠，于是我就将计就计，欸，将这个命名为发霉的火腿肠

实现

html

<body>
    <div class="container">
        <div class="con1">
            <div class="div1">
                <div class="one-front">Hello!</div>
                <div class="one-back"></div>
            </div>
        </div>

        <div class="con2">
            <div class="div2">
                <div class="two-front">这里是077！</div>
                <div class="two-back"></div>
            </div>
        </div>

        <div class="con3">
            <div class="div3">
                <div class="three-front">如果你也对前端技术感兴趣，欢迎一起学习讨论！</div>
                <div class="three-back"></div>
            </div>

        </div>

        <div class="con4">
            <div class="div4">
                <div class="four-front">今天也是想成为大佬的一天</div>
                <div class="four-back"></div>
            </div>

        </div>

        <div class="con5">
            <div class="div5">
                <div class="five-front">我是一个保安，爱吃小熊饼干</div>
                <div class="five-back"></div>
            </div>

        </div>

        <div class="con6">
            <div class="div6">
                <div class="six-front">（代码写成shi山了，别骂了别骂了会修改的会修改的）</div>
                <div class="six-back"></div>
            </div>
        </div>    

    </div>
    <script src="./js.js"></script>
</body>

css

body {
    perspective: 350px;
}

.div1,
.div2,
.div3,
.div4,
.div5,
.div6 {
    transition: all .2s;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(180deg);
}

.con1:hover>.div1,
.con2:hover>.div2,
.con3:hover>.div3,
.con4:hover>.div4,
.con5:hover>.div5,
.con6:hover>.div6 {
    transform: rotateX(0);
}

* {
    text-align: center;
    font-size: 50px;
}

.one-back,
.one-front,
.two-front,
.three-front,
.four-front,
.five-front,
.six-front,
.two-back,
.three-back,
.four-back,
.five-back,
.six-back {
    height: 100px;
    width: 100%;
    border: 2px solid;
    border-radius: 30px;
    margin-bottom: 5px;
    box-shadow: 2px 2px 5px rgb(58, 55, 55);
}

.one-front,
.one-back {
    background: linear-gradient(to left bottom, rgb(237, 204, 210), aquamarine 1000px);
}

.one-front,
.two-front,
.three-front,
.four-front,
.five-front,
.six-front {
    position: absolute;
    backface-visibility: hidden;
    /* transform: rotateY(180deg); */
}

.two-front,
.two-back {
    background: linear-gradient(to left bottom, rgb(237, 204, 210), aquamarine 800px);
}

.three-front,
.three-back {
    background: linear-gradient(to left bottom, rgb(237, 204, 210), aquamarine 600px);
}

.four-front,
.four-back {
    background: linear-gradient(to left bottom, rgb(237, 204, 210), aquamarine 400px);
}

.five-front,
.five-back {
    background: linear-gradient(to left bottom, rgb(237, 204, 210), rgb(157, 225, 203) 200px);
}

.six-front,
.six-back {
    background: linear-gradient(to left bottom, rgb(237, 204, 210), rgb(157, 225, 203) 100px);
}

backface-visibility属性

CSS3 backface-visibility属性 作用： backface-visibility 属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。

backface-visivility:visible\hidden
背面可见/背面不可见

box-shadow属性

box-shadow:2px 5px 1px 1px rgb(58, 55, 55) ;

第一个参数pffset-y，当为正数的时候阴影向右偏

第二个参数offset-x，当为整数的时候阴影向下偏

第三个参数blur，阴影的模糊半径，越大半径越大

第四个参数spread，阴影扩展面积

transform 属性

transform里rotate能 旋转元素的展示角度 下面我们来具体举例,详细了解这个属性和作用:
① transform; rotate(number+deg) 参数为正值的时候, 元素旋转的方向是顺时针, 当参数值为负值的时候, 旋转的方向是逆时针.
可以总结为: 正顺负逆 ② transform: roteta3d(x,y,z,angle)
但是了解它之前.我们先把 rotateX(angle),rotateY(angle),rotateZ(angle)给弄清楚..
这里的x,y,z 就是 旋转轴:元素旋转所依据的基线, 通常在元素几何上的中心

先看 rotetaX(angle) X为横轴.它的位置在元素的中线
（作者：奔云链接：events.jianshu.io/p/22fe04eaa… ）

掘金代码部分

总结

代码写的很垃圾，重点放在了旋转的实现上面，然后自适应忘记了，提交的时候才发现有这个问题，踩着ddl交作品，等到下一次全面优化的时候再一起完善叭（绝对不是因为我懒）写的时候被旋转这个地方绕晕了，写了好多bug （比如：

还有：

）

还有很多bug和可以修改的地方（有！但我悄悄地，我不说！我自己悄悄改！），大家轻点喷

「青训营 X 码上掘金」我的（火腿肠）名片