文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >变换旋转将div推出屏幕并变为不可见

问变换旋转将div推出屏幕并变为不可见
EN

Stack Overflow用户
提问于 2018-12-21 11:37:52
回答 1查看 110关注 0票数 0
代码语言：javascript
复制
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/*HEADER*/

#header {
    background: blue;
    background-attachment: fixed;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

.btn-1, .btn-2, .btn-3 {
    background-color: white;
    width: 62px;
    margin-bottom: 9px;
    height: 8px;
    border-radius: 5px;
}

.btn-1 {
    background-color: lightgreen;
    position: relative;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

@keyframes btn-1-animate {
    from {width: 62px; left: 0px; top: 0px;}
    to { top: 75px; left: -12px; width: 84px;}
}

@keyframes btn-1-reverse {
    from {top: 75px; left: -12px; width: 84px;}
    to {top: 0px; left: 0px; width: 62px;}
}

.btn-2 {
    border-radius: none;
    background-color: white;
    position: relative;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    z-index: 1;
}

@keyframes btn-2-animate {
    from {top: 0px; left: 0px; width: 62px}
    to {top: 58px; left: 65px; width: 117px;}
}

@keyframes btn-2-reverse {
    from {top: 58px; left: 65px; width: 117px;}
    to {top: 0px; left: 0px; width: 62px;}
}

.btn-3 {
    background-color: #ff4d4d;
    position: relative;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

@keyframes btn-3-animate {
    from {top: 0px; left: 0px; width: 62px;}
    to {top: 41px; left: 180px; width: 140px;}
}

@keyframes btn-3-reverse {
    from {top: 41px; left: 180px; width: 140px;}
    to {top: 0px; left: 0px; width: 62px;}
}

.side-menu, .nav-btn {
    padding-top: 100px;
    padding-left: 50px;
}

.nav-btn {
    width: 70px;
    position: fixed;
    top: 5px;
    z-index: 1;
}

#header ul {
    border-radius: 10px;
    margin: 0;
    list-style-type: none;
    background-color: white;
    position: fixed;
    top: 200px;
    text-align: center;
    box-shadow: -15px 0px lightgreen;
}

.side-menu {
    position: relative;
    left: -370px;
    transition: all 0.2s ease;
    z-index: 1;
}

.fa-times {
    position: fixed;
    left: -380px;
    top: 200px;
    font-size: 2rem;
    color: white;
    transition: all 0.2s ease;
}

.fa-times:hover {
    transform: scale(1.3);
    cursor: pointer;
}

#header li a {
    font-family: 'Kumar One Outline';
    text-decoration: none;
    font-size: 2.2rem;
    padding: 15px;
    color: grey;
    margin-bottom: 15px;

}

#header li:hover {
    transform: scale(1.15);
}

 #header li {
    margin: 15px;
    padding-left: 10px;
    padding-right: 50px;
    transition: all 0.35s ease;
 }

 #header li a:hover {
    cursor: pointer;
    font-weight: bolder;
    color: #96ea96;
 }

 #header p {
    float: right;
    font-weight: bold;
    font-size: 3.2rem;
    margin-top: -10px;
    margin-right: 100px;
    color: white;
    font-family: 'Cedarville Cursive';
 }

 /*ABOUT*/

 #about .container {
    background-color: #339966;
    width: 100vw;
    overflow: auto;
    padding-bottom: -400px;
 }

 #about h1 {
    margin-top: 0;
    font-family: 'Cedarville Cursive';
    font-size: 3.5rem;
    color: white;
    text-align: center;
    padding-top: 5px;
 }

 .line {
    background-color: orange;
    width: 0px;
    height: 4px;
    padding: 0;
    border-radius: 5px;
    text-align: center;
    margin-left: 560px;
    position: relative;
    top: 90px;
    transition: all 1s ease;
 }

 #about p {
    font-family: 'Josefin Sans';
    color: white;
    font-size: 1.8rem;
    width: 35%;
    margin-left: 130px;
 }

 .image-slider {
    background-color: grey;
    width: 35%;
    height: 250px;
    margin-right: 160px;
    padding-bottom: 100px;
    position: relative;
    top: -380px;
    float: right;
 }

 .fa-caret-down {
    color: white;
    font-size: 4rem;
    margin-top: 29%;
    position: relative;
 }

 .left {
    transform: rotate(90deg);
    left: -40px;
 }

 .right {
    float: right;
    transform: rotate(-90deg);
    left: 40px;
 }

/*MENU*/

#menu .container {
    background-color: #e6ac00;
    width: 100vw;
    margin-top: -330px;
    clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
}

.shape-wrap {
 position: relative;
}

.shape-1 {
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid #339966;
    border-bottom: 25px solid transparent;
    position: relative;
    top: 50px;
    left: -190px;
    display: inline-block;
    margin: 0;
}

.shape-2 {
    height: 0;
    border-top: 25px solid transparent;
    border-right: 50px solid #26734d;
    border-bottom: 25px solid transparent;
    float: left;
    position: relative;
    top: 25px;
    display: inline-block;
    left: 10px;
}

.shape-3 {
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid #40bf80;
    border-bottom: 25px solid transparent;
    position: relative;
    left: -195px;
    display: inline-block;
    top: 25px;
}

.shape-4 {
    height: 0;
    border-top: 25px solid transparent;
    border-right: 50px solid #26734d;
    border-bottom: 25px solid transparent;
    float: left;
    position: relative;
    left: -40px;
    display: inline-block;
    top: 85px;
}

.shape-5 {
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid #339966;
    border-bottom: 25px solid transparent;
    position: relative;
    left: -298px;
    display: inline-block;
    top: 110px;
}

.shape-6 {
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid #339966;
    border-bottom: 25px solid transparent;
    position: relative;
    top: 230px;
    display: inline-block;
    left: -351px;
}

.shape-7 {
    height: 0;
    border-top: 25px solid transparent;
    border-right: 50px solid #26734d;
    border-bottom: 25px solid transparent;
    float: left;
    position: relative;
    left: -90px;
    display: inline-block;
    top: 265px;
}

.shape-8 {
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid #339966;
    border-bottom: 25px solid transparent;
    position: relative;
    top: 290px;
    display: inline-block;
    left: -405px;
}

.shape-9 {
    height: 0;
    border-top: 25px solid transparent;
    border-right: 50px solid #26734d;
    border-bottom: 25px solid transparent;
    float: left;
    position: relative;
    left: -140px;
    display: inline-block;
    top: 325px;
}

.shape-10 {
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid #40bf80;
    border-bottom: 25px solid transparent;
    position: relative;
    left: -410px;
    display: inline-block;
    top: 325px;
}

#menu h1 {
    font-size: 7rem;
    color: white;
    font-family: 'Cedarville Cursive';
    margin-left: 220px;
    position: relative;
    top: -450px;
}

.line-2 {
    background-color: #339966;
    width: 0px;
    height: 5px;
    border-radius: 5px;
    position: relative;
    top: -600px;
    left: 45px;
    transition: all 1s ease;
}

.platter {
    font-size: 2.3rem;
    font-family: 'Cedarville Cursive';
    color: #339966;
    margin-left: 60px;
}

.platter-info {
    font-size: 1.2rem;
    font-family: 'Josefin Sans';
    color: white;
    margin-left: 120px;
    margin-top: -50px;
    margin-bottom: 30px;
}

.item {
    font-family: 'Josefin Sans';
    font-size: 1.3rem;
}

.price {
    font-size: 1.3rem;
    font-family: 'Josefin Sans';
    display: block;
    margin-left: 400px;
    margin-bottom: -40px;
    position: relative;
    bottom: 40px;
}

.col-1 {
    margin-left: 200px;
    margin-top: 0px;
    position: relative;
    top: -550px;
}

.plat-4 {
    position: relative;
    left: 120px;
}

.info4tacos {
    position: relative;
    left: 70px;
    margin-bottom: 35px;
}

.plat-7 {
    position: relative;
    left: 100px;
}

.plat-8 {
    position: relative; 
    right: 50px;
}

.plat-9 {
    position: relative;
    left: 30px;
}

.info4breakfast {
    position: relative;
    left: 50px;
}

.col-2 {
    float: right;
    margin-top: -3185px;
    margin-right: 200px;
}

.plat-2 {
    position: relative;
    left: 70px;
    top: 15px;
}

.plat-3 {
    position: relative;
    left: 60px;
}

.right-border {
    float: right;
    transform: rotate(180deg);
    position: relative;
    top: 2400px;
    right: 18px;
}

/*HOURS*/

#hours .container {
    background-color: #339966;
    width: 100vw;
    position: relative;
    margin-top: -470px;
    clip-path: polygon(0% 3%, 5% 0%, 95% 0%, 100% 3%, 100% 100%, 0% 100%);
}

#hours h1 {
    text-align: center;
    font-size: 4rem;
    color: white;
    font-family: 'Cedarville Cursive';
    padding-bottom: 100px;
    margin-top: 0px;
    position: relative;
    bottom: 30px;
}

.day, .hour {
    text-align: center;
    background-color: white;
    font-size: 2.5rem;
    color: #666;
    padding-top: 10px;
    margin-bottom: 10px;
    width: 220px;
    font-family: 'Josefin Sans';
    border-right: 12px solid #40bf80;
}

.grid {
    display: grid;
    grid-template-columns: 270px 270px;
    grid-auto-rows: 65px;
    grid-gap: 15px;
    position: relative;
    left: 50%;
    margin-left: -272.5px;
    margin-top: -150px;
}

.move3 {
    top: 85px;
}

.move10 {
    position: relative;
    top: 265px;
}

.rotate {
    transform: rotate(180deg);
    position: relative;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>El Metate | Mexican Food</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Kumar+One+Outline|Teko" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Diplomata+SC|Ewert|Sarina|Smokum" rel="stylesheet">
    <script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
    <section id="header">
        <div class="container">
            <div class="nav-btn">
                <div class="btn-1"></div>
                <div class="btn-2"></div>
                <div class="btn-3"></div>
            </div>  
                <div class="side-menu">
                    <ul>
                        <i class="fas fa-times"></i>
                        <li><a href="#header">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#menu">Menu</a></li>
                        <li><a href="#hours">Hours</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li><a href="#news">News</a></li>
                    </ul>
                </div>
            <p><span class="auth">Authentic</span><span class="mexi">Mexican</span><span class="food">Food</span></p>
            <img src="img/LogoMakr_Oso9xi.png" alt="">
        </div>
    </section>

    <section id="about">
        <div class="container">
            <div class="line"></div>
            <h1>About us</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, quis, adipisci! Unde natus quas officiis, earum commodi! Voluptate in modi alias quisquam maiores sunt fugit reprehenderit odio rem obcaecati libero repellat saepe quidem quibusdam impedit labore error velit, possimus necessitatibus. Optio ullam, officiis, sit ipsa fugiat animi voluptas labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, et.</p>
            <div class="image-slider">
                <i class="fas fa-caret-down left"></i>
                <i class="fas fa-caret-down right"></i>
            </div>
        </div>
    </section>

    <section id="menu">
        <div class="container">
            <div class="left-border">
                <div class="shape-wrap">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 385px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 770px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 1155px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 1540px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 1925px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 2310px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
            </div>

            <div class="right-border">
                <div class="shape-wrap">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 385px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 770px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 1155px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 1540px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 1925px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
                <div class="shape-wrap" style="top: 2310px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10"></span>
                </div>
            </div>

            <h1>Menu</h1>
            <div class="line-2"></div>

            <div class="vexel-images"></div>

            <div class="col-1">
                <h3 class="platter">Combination Platters</h3>
                <p class="platter-info">Rice & Beans Included</p>

                <p class="item item-1">Tostada & Taco</p><span class="price p1"><span class="s1">$</span>6.39</span>
                <p class="item item-2">2 Beef Tacos</p><span class="price p2"><span class="s1">$</span>6.39</span>
                <p class="item item-3">2 Enchiladas</p><span class="price p3"><span class="s1">$</span>6.39</span>
                <p class="item item-4">Tostada & Enchilada</p><span class="price p4"><span class="s1">$</span>6.39</span>
                <p class="item item-5">Taco & Enchilada</p><span class="price p5"><span class="s1">$</span>6.39</span>
                <p class="item item-6">Burrito & Enchilada</p><span class="price p6"><span class="s1">$</span>6.39</span>
                <p class="item item-7">2 Beef Burritos</p><span class="price p7"><span class="s1">$</span>7.45</span>
                <p class="item item-8">2 Carne Asada Tacos</p><span class="price p8"><span class="s1">$</span>8.09</span>
                <p class="item item-9">Chorizo</p><span class="price p9"><span class="s1">$</span>6.39</span>
                <p class="item item-10">Carne Asada</p><span class="price p10"><span class="s1">$</span>8.19</span>
                <p class="item item-11">Machaca</p><span class="price p11"><span class="s1">$</span>6.75</span>
                <p class="item item-12">Carnitas</p><span class="price p12"><span class="s1">$</span>7.19</span>
                <p class="item item-13">2 Fish Tacos</p><span class="price p13"><span class="s1">$</span>6.75</span>
                <p class="item item-14">Chiles Rellenos</p><span class="price p14"><span class="s1">$</span>6.95</span>
                <p class="item item-15">Red Combo</p><span class="price p15"><span class="s1">$</span>7.95</span>
                <p class="item item-16">Green Combo</p><span class="price p16"><span class="s1">$</span>7.05</span>
                <p class="item item-17">3 Rolled Tacos w/Guacamole</p><span class="price p17"><span class="s1">$</span>6.75</span>
                <p class="item item-18">Chimichanga, Rice & Beans</p><span class="price p18"><span class="s1">$</span>7.05</span>
                <p class="item item-19">Carne Asada Burrito</p><span class="price p19"><span class="s1">$</span>7.19</span>
                <p class="item item-20">2 Tamales, Rice & Beans</p><span class="price p20"><span class="s1">$</span>7.05</span>

                <h3 class="platter plat-4">Tacos</h3>
                <p class="platter-info info4tacos">Folded</p>

                <p class="item item-21">1 Chicken Taco</p><span class="price p21"><span class="s1">$</span>2.09</span>
                <p class="item item-22">1 Beef</p><span class="price p22"><span class="s1">$</span>2.09</span>
                <p class="item item-23">1 Carne Asada</p><span class="price p23"><span class="s1">$</span>2.61</span>
                <p class="item item-21">1 Fish</p><span class="price p21"><span class="s1">$</span>2.64</span>
                <p class="item item-22">1 Carnitas</p><span class="price p22"><span class="s1">$</span>2.64</span>
                <p class="item item-23">1 Adobada</p><span class="price p23"><span class="s1">$</span>2.64</span>
                <p class="item item-23">1 Cabeza</p><span class="price p23"><span class="s1">$</span>2.64</span>

                <p class="platter-info info4tacos">Rolled</p>

                <p class="item item-21">3 Plain with Cheese</p><span class="price p21"><span class="s1">$</span>2.39</span>
                <p class="item item-22">3 Cheese and Guacamole</p><span class="price p22"><span class="s1">$</span>2.89</span>
                <p class="item item-23">3 Chicken w/Cheese and Guacamole</p><span class="price p23"><span class="s1">$</span>2.89</span>
                <p class="item item-21">3 Tacos w/Cheese and Guacamole</p><span class="price p21"><span class="s1">$</span>3.99</span>
                <p class="item item-22">12 Tacos w/Cheese and Guacamole</p><span class="price p22"><span class="s1">$</span>8.99</span>

                <h3 class="platter plat-7">Tortas</h3>

                <p class="item item-21">Carne Asada</p><span class="price p21"><span class="s1">$</span>2.09</span>
                <p class="item item-22">Machaca</p><span class="price p22"><span class="s1">$</span>2.09</span>
                <p class="item item-23">Ham</p><span class="price p23"><span class="s1">$</span>2.61</span>
                <p class="item item-21">Chorizo</p><span class="price p21"><span class="s1">$</span>2.64</span>
                <p class="item item-22">Chicken</p><span class="price p22"><span class="s1">$</span>2.64</span>
                <p class="item item-23">Carnitas</p><span class="price p23"><span class="s1">$</span>2.64</span>
                <p class="item item-23">Fish</p><span class="price p23"><span class="s1">$</span>2.64</span>

                <h3 class="platter plat-8">Breakfast Served Everyday</h3>
                <p class="platter-info info4breakfast">6am to 11am</p>

                <h3 class="platter plat-9">Breakfast Plates</h3>

                <p class="item item-21">Huevos Racheros</p><span class="price p21"><span class="s1">$</span>6.29</span>
                <p class="item item-22">Steaks Racheros</p><span class="price p22"><span class="s1">$</span>6.95</span>
                <p class="item item-22">Scrambled Eggs w/Ham</p><span class="price p22"><span class="s1">$</span>5.95</span>
                <p class="item item-22">Scrambled Eggs w/Suasage</p><span class="price p22"><span class="s1">$</span>5.95</span>
                <p class="item item-22">Chorizo Omelette</p><span class="price p22"><span class="s1">$</span>6.95</span>
                <p class="item item-22">Carne Asada Omelette</p><span class="price p22"><span class="s1">$</span>7.95</span><p class="item item-22">Scrambled Eggs w/Ham</p><span class="price p22"><span class="s1">$</span>5.95</span>
                <p class="item item-22">Eggs and Bacon</p><span class="price p22"><span class="s1">$</span>5.95</span>
            </div>

            <div class="col-2">
                <h3 class="platter plat-2">Enchiladas</h3>

                <p class="item item-21">2 Cheese</p><span class="price p21"><span class="s1">$</span>4.55</span>
                <p class="item item-22">2 Beef</p><span class="price p22"><span class="s1">$</span>4.65</span>
                <p class="item item-23">2 Chicken</p><span class="price p23"><span class="s1">$</span>3.55</span>

                <h3 class="platter plat-10">Breakfast Burritos</h3>

                <p class="item item-21">Suasage & Egg</p><span class="price p21"><span class="s1">$</span>4.09</span>
                <p class="item item-22">Ham & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
                <p class="item item-22">Bacon & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
                <p class="item item-22">Steak & Chorizon</p><span class="price p22"><span class="s1">$</span>4.75</span>
                <p class="item item-22">Picodegallo eggs & cheese</p><span class="price p22"><span class="s1">$</span>3.95</span>
                <p class="item item-22">Chorizo & Eggs</p><span class="price p22"><span class="s1">$</span>4.85</span>
                <p class="item item-22">Chorizo & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
            </div>
        </div>
    </section>

    <section id="hours">
        <div class="container">
            <div class="shape-wrap" style="top: 250px; left: 70px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3 move3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10 move10"></span>
                </div>
                <div class="shape-wrap rotate" style="top: 230px; left: 200px;">
                    <span class="shape-1"></span>
                    <span class="shape-2"></span>
                    <span class="shape-3 move3"></span>
                    <span class="shape-4"></span>
                    <span class="shape-5"></span>
                    <span class="shape-6"></span>
                    <span class="shape-7"></span>
                    <span class="shape-8"></span>
                    <span class="shape-9"></span>
                    <span class="shape-10 move10"></span>
                </div>
            <h1>Hours</h1>
            <div class="hours-line"></div>
            <div class="hours-line2"></div>

            <div class="grid">
                <div class="day">Sunday</div>
                <div class="hour">8am - 8pm</div>
                <div class="day">Monday</div>
                <div class="hour">6am - 10am</div>
                <div class="day">Tuesday</div>
                <div class="hour">6am - 10am</div>
                <div class="day">Wednesday</div>
                <div class="hour">6am - 10am</div>
                <div class="day">Thursday</div>
                <div class="hour">6am - 10am</div>
                <div class="day">Friday</div>
                <div class="hour">6am - 10am</div>
                <div class="day">Saturday</div>
                <div class="hour">6am - 10am</div>
            </div>
        </div>
    </section>
    <script src="script.js"></script>
</body>
</html>

嘿，伙计们，我目前正在为这个网站的小时部分工作。具体来说，我正在设计左边界和右边界。左侧由两组形状组成。你可以在那里看到第一个，我想要的是那个形状图案的复制品，但旋转了180度。然而，这会将其推到屏幕的右侧，并使其不可见。我在这个网站上看到一些东西在谈论如果div是2D的，它将如何被视为3D，除了我认为那是rotateY。无论如何，任何帮助都将不胜感激。

另外，我必须删除很多代码，这样我才能发布这篇文章，非常抱歉，菜单部分看起来乱七八糟的。

css
html
EN

回答 1

Stack Overflow用户

发布于 2018-12-21 12:28:52

这是因为div太大了。您可以设置position: absolute或限制div大小width: 500px

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/53878870

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档