CSS3过渡 -- 笔记 - 图2review0513

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>review0513</title>
  6.     <style type="text/css">
  7.         body{
  8.             background-color: #abcdef;
  9.         }
  11.         div{
  12.             width: 800px;
  13.             height: 800px;
  14.             margin: auto;
  15.             transform: rotate(0deg);
  16.             background: url(images/3.jpg) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
  17.             transition: transform 2s ease-in-out 1s;
  18.         }
  20.         div:hover{
  21.             cursor: pointer;
  22.             transform: rotate(180deg);
  23.             transition: transform 2s ease-in-out 1s;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div></div>
  29. </body>
  30. </html>

review0513 dodoke

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dodoke</title>
    <style type="text/css">
        div{
            margin: 100px auto;
            padding: 25px 10px 0px 10px;
            width: 200px;
            height: 50px;
            background-color: #abcdef;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            transition:width 1s 0.5s,height 1s 0.5s,transform 1s 0.5s,font-size 1s 0.5s,padding 1s 0.5s;
        }

        div:hover{
            cursor: pointer;
            margin: 100px auto;
            width: 400px;
            height: 100px;
            padding: 40px 10px 0px 10px;
            font-size: 40px;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div>www.dodoke.com</div>
</body>
</html>

review0513 touzi

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>骰子案例</title>
    <style type="text/css">
        body{
            perspective: 800px;
            perspective-origin: 50%;
        }

        .cube{
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 50px;
            transform-style: preserve-3d;
        }

        .cube > div{
            position: absolute;
            width: 100%;
            height: 100%;
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
            background-color: rgba(255, 255, 255, 0.1);
            color: gray;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
        }

        .qian{
            transform: translateZ(50px);
        }
        .hou{
            transform: translateZ(-50px) rotateY(180deg);
        }
        .you{
            transform: translateX(50px) rotateY(90deg);
        }
        .zuo{
            transform: translateX(-50px) rotateY(-90deg);
        }
        .shang{
            transform: translateY(-50px) rotateX(90deg);
        }
        .xia{
            transform: translateY(50px) rotateX(-90deg);
        }

        .c1 > div{
            backface-visibility: visible;
        }
        .c2 > div{
            backface-visibility: hidden;
        }

        .c1{
            transform: rotate3d(1, 1, 1, 38deg);
        }
        .c2{
            transform: rotate3d(0, 1, 1, 90deg);
        }
    </style>
</head>
<body>
    <div class="cube c1">
        <div class="qian">1</div>
        <div class="hou">2</div>
        <div class="you">3</div>
        <div class="zuo">4</div>
        <div class="shang">5</div>
        <div class="xia">6</div>
    </div>
    <div class="cube c2">
        <div class="qian">1</div>
        <div class="hou">2</div>
        <div class="you">3</div>
        <div class="zuo">4</div>
        <div class="shang">5</div>
        <div class="xia">6</div>
    </div>
</body>
</html>