CSS3转换 -- 笔记 - 图2review0511 rotate

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>rotate</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.             list-style-type: none;
  11.         }
  12.         img{
  13.             border: 0;
  14.         }
  15.         body{
  16.             font: 12px/180% Arial;
  17.         }
  18.         .main{
  19.             width: 1000px;
  20.             margin: 50px auto;
  21.             position: relative;
  22.         }
  23.         .pic{
  24.             width: 300px;
  25.             height: 290px;
  26.             border: 1px solid #ccc;
  27.             background: #fff;
  28.             box-shadow: 2px 2px 3px #aaa;
  29.         }
  30.         .pic img{
  31.             margin: 10px 0 0 8px;
  32.             width: 285px;
  33.         }
  34.         .pic p{
  35.             text-align: center;
  36.             font-size: 20px;
  37.         }
  38.         .pic1{
  39.             -webkit-transform: rotate(7deg);
  40.                -moz-transform: rotate(7deg);
  41.                 -ms-transform: rotate(7deg);
  42.                  -o-transform: rotate(7deg);
  43.                     transform: rotate(7deg);
  44.         }
  45.         .pic2{
  46.             -webkit-transform: rotate(-8deg);
  47.                -moz-transform: rotate(-8deg);
  48.                 -ms-transform: rotate(-8deg);
  49.                  -o-transform: rotate(-8deg);
  50.                     transform: rotate(-8deg);
  51.         }
  52.         .pic3{
  53.             position: absolute;
  54.             top: 40px;
  55.             left: 313px;
  56.             z-index: 200;
  57.             -webkit-transform: rotate(-35deg);
  58.                -moz-transform: rotate(-35deg);
  59.                 -ms-transform: rotate(-35deg);
  60.                  -o-transform: rotate(-35deg);
  61.                     transform: rotate(-35deg);
  62.         }
  63.         .pic4{
  64.             position: absolute;
  65.             top: 360px;
  66.             left: 350px;
  67.             z-index: 300;
  68.             -webkit-transform: rotate(35deg);
  69.                -moz-transform: rotate(35deg);
  70.                 -ms-transform: rotate(35deg);
  71.                  -o-transform: rotate(35deg);
  72.                     transform: rotate(35deg);
  73.         }
  74.         .pic5{
  75.             position: absolute;
  76.             top: 150px;
  77.             left: 553px;
  78.             z-index: 400;
  79.             -webkit-transform: rotate(80deg);
  80.                -moz-transform: rotate(80deg);
  81.                 -ms-transform: rotate(80deg);
  82.                  -o-transform: rotate(80deg);
  83.                     transform: rotate(80deg);
  84.         }
  85.         .pic6{
  86.             position: absolute;
  87.             top: 180px;
  88.             left: 182px;
  89.             z-index: 500;
  90.             -webkit-transform: rotate(-24deg);
  91.                -moz-transform: rotate(-24deg);
  92.                 -ms-transform: rotate(-24deg);
  93.                  -o-transform: rotate(-24deg);
  94.                     transform: rotate(-24deg);
  95.         }
  96.     </style>
  97. </head>
  98. <body>
  99.     <div class="main">
  100.         <div class="pic pic1">
  101.             <img src="4.jpg">
  102.             <p>2D转换</p>
  103.         </div>
  104.         <div class="pic pic2">
  105.             <img src="4.jpg">
  106.             <p>2D转换</p>
  107.         </div>
  108.         <div class="pic pic3">
  109.             <img src="4.jpg">
  110.             <p>2D转换</p>
  111.         </div>
  112.         <div class="pic pic4">
  113.             <img src="4.jpg">
  114.             <p>2D转换</p>
  115.         </div>
  116.         <div class="pic pic5">
  117.             <img src="4.jpg">
  118.             <p>2D转换</p>
  119.         </div>
  120.         <div class="pic pic6">
  121.             <img src="4.jpg">
  122.             <p>2D转换</p>
  123.         </div>
  124.     </div>
  125. </body>
  126. </html>

review0512 translate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate</title>
    <style type="text/css">
        div { 
            width: 361px; 
            height: 240px; 
            background: #abcdef; 
            margin: auto; 
        }
        div > img {
            transform: translate(200px,100px); 
        }
    </style>
</head>
<body> 
    <div><img src="4.jpg"></div>
</body>
</html>

review0512 rotateX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotateX</title>
    <style type="text/css">
        div { 
            width: 361px; 
            height: 240px; 
            background: #abcdef; 
            margin: auto; 
        }
        div > img {
            transform: rotateX(45deg);
        }
        </style>
    </head>
    <body>
        <div><img src="4.jpg"></div>
    </body>
    </html>

review0512 scale

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale</title>
    <style type="text/css">
        div { 
            width: 361px; 
            height: 240px; 
            background: #abcdef; 
            margin: auto; 
        }
        div > img {
            transform: scale(.5,.5);
        }
    </style>
</head>
<body>
    <div><img src="4.jpg"></div>
</body>
</html>

review0512 skew

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>skew</title>
    <style type="text/css">
        div { 
            width: 361px; 
            height: 240px; 
            background: #abcdef; 
            margin: auto; 
        }
        div > img {
            transform: skewY(15deg);
        }
    </style>
</head>
<body>
    <div><img src="4.jpg"></div>
</body>
</html>

review0512 dodoke

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dodoke</title>
    <style type="text/css">
        body{
            background: #abcdef;
        }

        div{
            position: relative;
            width: 760px;
            height: 760px;
            margin: auto;
            transform-style: preserve-3d;
            perspective: 500px;
        }

        div > .inner{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: auto;
            background: url("images/circle_inner.png") no-repeat center center;
            transform: rotateY(-45deg);
        }
        div > .middle{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: auto;
            background: url("images/circle_middle.png") no-repeat center center;
            transform: rotateX(-45deg);
        }
        div > .outer{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: auto;
            background: url("images/circle_outer.png") no-repeat center center;
            transform: rotateZ(-45deg);
        }
        div > .dodoke{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: auto;
            background: url("images/dodoke.png") no-repeat center center;
        }
    </style>
</head>
<body>
    <div>
        <div class="inner"></div>
        <div class="middle"></div>
        <div class="outer"></div>
        <div class="dodoke"></div>
    </div>
</body>
</html>

review0512 redflag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五星红旗</title>
    <style type="text/css">
        *{
            margin: 0;
        }

        .redflag{
            width: 600px;
            height: 400px;
            background: red;
            position: relative;
        }

        .bigstar{
            width:0;
            height:0;
            border-left:50px solid transparent;
            border-right:50px solid transparent;
            border-bottom:35px solid yellow;
            transform:rotate(35deg);
            position:absolute;
            left:32px;
            top:55px;
        }
        .bigstar::before{
            width:0;
            height:0;
            border-left:15px solid transparent;
            border-right:15px solid transparent;
            border-bottom:40px solid yellow;
            transform:rotate(-35deg);
            content:"";
            position:absolute;
            left:-33px;
            top:-28px;
        }
        .bigstar::after{
            width:0;
            height:0;
            border-left:50px solid transparent;
            border-right:50px solid transparent;
            border-bottom:35px solid yellow;
            transform:rotate(-70deg);
            content:"";
            position:absolute;
            top:0px;
            left:-51px;
        }

        .smallstar{
            width:0;
            height:0;
            border-left:15px solid transparent;
            border-right:15px solid transparent;
            border-bottom:10px solid yellow;
            transform:rotate(35deg);
        }
        .smallstar::before{
            width:0;
            height:0;
            border-left:5px solid transparent;
            border-right:5px solid transparent;
            border-bottom:11px solid yellow;
            transform:rotate(-35deg);
            content:"";
            position:absolute;
            left:-11px;
            top:-7px;
        }
        .smallstar::after{
            width:0;
            height:0;
            border-left:15px solid transparent;
            border-right:15px solid transparent;
            border-bottom:10px solid yellow;
            transform:rotate(-70deg);
            content:"";
            position:absolute;
            top:0;
            left:-17px;
        }

        .smallstar1{
            position:absolute;
            left:146px;
            top:20px;
            transform:rotate(20deg);
        }
        .smallstar2{
            position:absolute;
            left:160px;
            top:60px;
            transform:rotate(25deg);
        }
        .smallstar3{
            position:absolute;
            left:153px;
            top:95px;
            transform:rotate(30deg);
        }
        .smallstar4{
            position:absolute;
            left:130px;
            top:126px;
            transform:rotate(35deg);
        }
    </style>
</head>
<body>
    <div class="redflag">
        <div class="bigstar"></div>
        <div class="smallstar smallstar1"></div>
        <div class="smallstar smallstar2"></div>
        <div class="smallstar smallstar3"></div>
        <div class="smallstar smallstar4"></div>
    </div>
</body>
</html>