css旋转效果_css多步旋转-CSDN博客

本文链接：https://blog.csdn.net/longwayyw/article/details/82558233

没有听得十分明白，尽力跟着写了一段代码，主要是图片和文字可以组合成效果的。
敲了这些代码，不以跬步无以至千里。

<!doctype html>
<html>
    <head>
         <title>css3旋转信息-万章</title>
         <meta charset="UFT-8">
         <meta name="keywords" content="3D效果，列表页，信息展示模块，万章">
         <meta name="description" content="这是由万章老师亲自编写得css3 3D动画案例，效果一级棒">
         <style>
              body{
                   margin:0;
              }
              .message{
                   display:flex;
                   justify-content:space-between;
                   width:1040px;
                   height:300px;
                   background-color:#ffcc99;
                   margin:60px auto 0 auto;

              }
              .messagelist{
                   display:flex;
                   width:300px;
                   height:300px;
                   background-color:#00ccff;
                   perspective:1000px;

               }
               .listpic{
                  /* position:absolute;*/
                   width:300px;
                   height:300px;
                   background-color:#66ff99;
               }
               .listtext{
                  /* position:absolute;*/
                   display:flex;
                   align-items:center;
                   width:300px;
                   height:300px;
                   background-color:#000000;
               }
               p{
                   margin:0;
                   color:#ffffff;
                   text-align:center;
               }
         </style>
    </head>
    <body>
         <div class="message">
              <div class="messagelist">
                    <div class="listpic">
                         <img src="images/1.jpg">
                    </div>
                    <div class="listtext">
                        <p>Failure is like a thief Failure is probably the fortification in your pole. It is like a peek your wallet as the thief, when you are .
                        </p>
                    </div>
              </div>
              <div class="messagelist"></div>
              <div class="messagelist"></div>
          </div>
    </body>
</html>