Question

我正在尝试创建个人资料网站。但是我似乎碰到了一堵砖墙;我无法找到一种在我的部分制作旋转木马中心的方法。

有没有人对我能做什么有任何建议？

这是一个包含代码的codepen： https://codepen.io/Todai/pen/RRPGwZ

这是我的.html：

<html>

<head>
<link rel="stylesheet" href="resources/font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/flipCardCSS.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<div class="container-fluid">
  <header id="banner">
    <div class="container">
      <div class="col-md-2">
        <!-- <a href="#"> <span id="link"> -F </span> </a> -->
        <img src="http://res.cloudinary.com/todai/image/upload/v1464873431/146487352498428_v9sob9.gif" id="bannerImg">
      </div>
      <div class="col-md-10">
        <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" class="navbar-toggle collapsed">
        <span class="sr-only"> Toggle navigation </span>
        <span class="icon-bar"> </span>
        <span class="icon-bar"> </span>
        <span class="icon-bar"> </span>
      </button>
        <nav id="navbar" role="navigation" class="collapse navbar-collapse" aria-expanded="false">
          <ul class="nav navbar-nav navbar-right">
            <li class="active">
              <a href="#top" class="scrollable"> About </a>
            </li>
            <li class>
              <a href="#portfolio" class="scrollable"> Portfolio </a>
            </li>
            <li class>
              <a href="#contact" class="scrollable"> Contact </a>
            </li>
          </ul>
        </nav>
      </div>
      <a id="top" name="home"> </a>
      </header>
      <main >
        <header class="row customClass">
          <div class="intro-text col-md-8" >
          <p class="text-right">
            My name is <strong> J</strong>oakim <strong>K</strong>akaei, I'm a Software Engineer with knowledge of most main-stream languages as well as some more obscure. I have experience working with c++, c#, java amongst many other; working knowledge of project management and methodologies.
          </p>
            <hr class="star-bright">
            </hr>
           <span class="skills">
             Software Engineer - Web Developer - Security Hobbyist
          </span>
          </div>
        <div class="col-md-4">
            <img src="http://res.cloudinary.com/todai/image/upload/v1464900561/12976795_10208023281372738_6826518550098825642_o_e2brh3.jpg"  alt>
        </div>
        </header>

      <section id="Portfolio">
        <h2> Portfolio </h2>
        <hr class="star-dark"/>
        <div class="container center">
            <div class="prev">Prev</div>
              <div class="carousel">
                <div class="item a">
                  <div id="f1_container">
                    <div id="f1_card" class="shadow">
                      <div class="front face">
                          <img src="http://res.cloudinary.com/todai/image/upload/v1469565942/geostocks-transparent_pyxgvj.png"/>
                            </div>
                            <div class="back face center">
                              <p>A distributed software built in Erlang, using a MSSQL instance and
                                  a C# Web Api end-point.</p>
                              <p>I was in charge with working on the Android and web front-end.</p> 
                        <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                      </div>
                    </div>
                </div>
                </div>
                <div class="item b">
                  <div id="f1_container">
                    <div id="f1_card" class="shadow">
                      <div class="front face">
                          <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535266/Screen-Shot-2011-12-11-at-9.39.26-PM_twyfwy.png"/>
                            </div>
                            <div class="back face center">
                              <p>A distributed software built in Erlang, using a MSSQL instance and
                                  a C# Web Api end-point.</p>
                              <p>I was in charge with working on the Android and web front-end.</p> 
                        <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                      </div>
                    </div>
                </div>
                </div>
                <div class="item c">
                    <div id="f1_container">
                      <div id="f1_card" class="shadow">
                        <div class="front face">
                            <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
                              </div>
                              <div class="back face center">
                                <p>A distributed software built in Erlang, using a MSSQL instance and
                                    a C# Web Api end-point.</p>
                                <p>I was in charge with working on the Android and web front-end.</p> 
                          <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                        </div>
                    </div>
                </div>
                </div>
                <div class="item d">
                    <div id="f1_container">
                      <div id="f1_card" class="shadow">
                        <div class="front face">
                            <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
                              </div>
                              <div class="back face center">
                                <p>A distributed software built in Erlang, using a MSSQL instance and
                                    a C# Web Api end-point.</p>
                                <p>I was in charge with working on the Android and web front-end.</p> 
                          <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                        </div>
                    </div>
                </div>
                </div>
                <div class="item e">
                    <div id="f1_container">
                      <div id="f1_card" class="shadow">
                        <div class="front face">
                            <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
                              </div>
                              <div class="back face center">
                                <p>A distributed software built in Erlang, using a MSSQL instance and
                                    a C# Web Api end-point.</p>
                                <p>I was in charge with working on the Android and web front-end.</p> 
                          <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                        </div>
                    </div>
                </div>
                </div>
                <div class="item f">
                  <div id="f1_container">
                    <div id="f1_card" class="shadow">
                      <div class="front face">
                          <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
                            </div>
                            <div class="back face center">
                              <p>A distributed software built in Erlang, using a MSSQL instance and
                                  a C# Web Api end-point.</p>
                              <p>I was in charge with working on the Android and web front-end.</p> 
                        <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                      </div>
                  </div>
                </div>
                </div>
              </div>

            <div class="next">Next</div>
            </div>

    </section>
      </main>
  </div>
</div>


</div>
</body>

</html>
<script src="resources/scripts/carousel.js"> </script>

Answer 1

这是一种水平居中相对定位元素的简便方法：

apm install markdown-toc

中心旋转木马（css 3d）的部分

1 个答案: