• css3 实现的两个3d效果


    1、旋转的正方体

    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>旋转的正方体</title>
        <style type="text/css">
        @-webkit-keyframes rotationX {
            from { 
              -webkit-transform: rotateX(0);
            }
            to { 
              -webkit-transform: rotateX(360deg);
            }
        }
        @-webkit-keyframes rotationY {
            from { 
              -webkit-transform: rotateY(0);
            }
            to { 
              -webkit-transform: rotateY(360deg);
            }
        }
        @-moz-keyframes rotationX {
            from { 
              -moz-transform: rotateX(0);
            }
            to { 
              -moz-transform: rotateX(360deg);
            }
        }
        @-moz-keyframes rotationY {
            from { 
              -moz-transform: rotateY(0);
            }
            to { 
              -moz-transform: rotateY(360deg);
            }
        }
        @-o-keyframes rotationX {
            from { 
              -o-transform: rotateX(0);
            }
            to { 
              -o-transform: rotateX(360deg);
            }
        }
        @-o-keyframes rotationY {
            from { 
              -o-transform: rotateY(0);
            }
            to { 
              -o-transform: rotateY(360deg);
            }
        }
        @keyframes rotationX {
            from { 
              transform: rotateX(0);
            }
            to { 
              transform: rotateX(360deg);
            }
        }
        @keyframes rotationY {
            from { 
              transform: rotateY(0);
            }
            to { 
              transform: rotateY(360deg);
            }
        }
        body {
            background: black;
        }
        #space3d {
            -webkit-perspective: 800;
            -moz-perspective: 800;
            -o-perspective: 800;
            perspective: 800;
            -webkit-perspective-origin: 50% 10%;
            -moz-perspective-origin: 50% 10%;
            -o-perspective-origin: 50% 10%;
            perspective-origin: 50% 10%;
        }
        #pagegroup {
            position: relative;
            top: 160px;
            margin: 0 auto;
            height: 200px;
            width: 200px;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-animation-name: rotationY;
            -webkit-animation-duration: 8s;
            -webkit-animation-function: linear;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -moz-animation-name: rotationY;
            -moz-animation-duration: 8s;
            -moz-animation-function: linear;
            -moz-animation-iteration-count: infinite;
            -moz-animation-direction: alternate;
            -o-animation-name: rotationY;
            -o-animation-duration: 8s;
            -o-animation-function: linear;
            -o-animation-iteration-count: infinite;
            -o-animation-direction: alternate;
            animation-name: rotationY;
            animation-duration: 8s;
            animation-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        #pagegroup .page {
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(255, 255, 255, 0.6);
            border: 1px solid white;
            border-radius: 12px;
            height: 200px;
            width: 200px;
            color: black;
            font-size: 124pt;
            text-align: center;
        }
        #pagegroup .page1 {
            -webkit-transform: translateZ(100px);
            -moz-transform: translateZ(100px);
            -o-transform: translateZ(100px);
            transform: translateZ(100px);
        }
        #pagegroup .page2 {
            -webkit-transform: rotateY(90deg) translateZ(100px);
            -moz-transform: rotateY(90deg) translateZ(100px);
            -o-transform: rotateY(90deg) translateZ(100px);
            transform: rotateY(90deg) translateZ(100px);
        }
        #pagegroup .page3 {
            -webkit-transform: rotateY(180deg) translateZ(100px);
            -moz-transform: rotateY(180deg) translateZ(100px);
            -o-transform: rotateY(180deg) translateZ(100px);
            transform: rotateY(180deg) translateZ(100px);
        }
        #pagegroup .page4 {
            -webkit-transform: rotateY(-90deg) translateZ(100px);
            -moz-transform: rotateY(-90deg) translateZ(100px);
            -o-transform: rotateY(-90deg) translateZ(100px);
            transform: rotateY(-90deg) translateZ(100px);
        }
        #pagegroup .page5 {
            -webkit-transform: rotateX(90deg) translateZ(100px);
            -moz-transform: rotateX(90deg) translateZ(100px);
            -o-transform: rotateX(90deg) translateZ(100px);
            transform: rotateX(90deg) translateZ(100px);
        }
        #pagegroup .page6 {
            -webkit-transform: rotateX(-90deg) translateZ(100px);
            -moz-transform: rotateX(-90deg) translateZ(100px);
            -o-transform: rotateX(-90deg) translateZ(100px);
            transform: rotateX(-90deg) translateZ(100px);
        }
        </style>
    </head>
    <body>
    <!-- div#space3d>div#pagegroup>div.page.page${$}*6 -->
    <div id="space3d">
        <div id="pagegroup">
            <div class="page page1">1</div>
            <div class="page page2">2</div>
            <div class="page page3">3</div>
            <div class="page page4">4</div>
            <div class="page page5">5</div>
            <div class="page page6">6</div>
        </div>
    </div>
    <button id="changeX">沿X轴旋转</button>
    <button id="changeY">沿Y轴旋转</button>
    <script type="text/javascript">
    ;(function() {
        var 
            win = this, 
            doc = win.document, 
            cube = doc.getElementById('pagegroup'), 
            changeX = doc.getElementById('changeX'), 
            changeY = doc.getElementById('changeY');
        win.addEventListener('load', ready, false);
        function ready() {
            changeX.addEventListener('click', rotationX, false);
            changeY.addEventListener('click', rotationY, false);
        }
        function rotationX() {
            cube.style.webkitAnimationName = 'rotationX';
            cube.style.mozAnimationName = 'rotationX';
            cube.style.oAnimationName = 'rotationX';
            cube.style.animationName = 'rotationX';
        }
        function rotationY() {
            cube.style.webkitAnimationName = 'rotationY';
            cube.style.mozAnimationName = 'rotationY';
            cube.style.oAnimationName = 'rotationY';
            cube.style.animationName = 'rotationY';
        }
    }).call(this);
    </script>
    </body>
    </html>

    2、旋转木马

    <!DOCTYPE html>
    <html>
    <head>
        <title>旋转木马</title>
        <meta charset="utf-8" />
        <style>
        @-webkit-keyframes spin {
            from { 
              -webkit-transform: rotateY(0);
            }
            to { 
              -webkit-transform: rotateY(360deg);
            }
        }
        body {
            background: black;
        }
        #stage {
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;
        }
        #container {
            position: relative;
            margin: 200px auto 0 auto;
            width: 100px;
            -webkit-transform-style: preserve-3d;
            -webkit-transition: -webkit-transform 1s;
            -webkit-animation: spin 12s linear infinite;
        }
        #container img {
            position: absolute;
            border: 1px solid red;
        }
        #container img:nth-child(1) {
            -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(0deg) translateZ(87px);
        }
        #container img:nth-child(2) {
            -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(60deg) translateZ(87px);
        }
        #container img:nth-child(3) {
            -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(120deg) translateZ(87px);
        }
        #container img:nth-child(4) {
            -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(180deg) translateZ(87px);
        }
        #container img:nth-child(5) {
            -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(240deg) translateZ(87px);
        }
        #container img:nth-child(6) {
            -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(300deg) translateZ(87px);
        }
        </style>
    </head>
    <body>
    <div id="stage">
        <div id="container">
            <img src="http://58lou.com/data/albums/album_38/100x100/e721542702399a9dd6cae27b.jpg">
            <img src="http://58lou.com/data/albums/album_38/100x100/wKgKN0_NYPn6MD7uABcPAyDfdDc037.jpg">
            <img src="http://58lou.com/data/albums/album_38/100x100/http_imgload.cgi.jpg">
            <img src="http://58lou.com/data/albums/album_38/100x100/463427_145609312231781_1758510383_o.jpg">
            <img src="http://58lou.com/data/albums/album_38/100x100/wKgKN1Bjtk2UJjTnAACAs9rWOqI551.jpg">
            <img src="http://58lou.com/data/albums/album_38/100x100/%7B880140A8-D42A-479C-B96B-831C8FA15DC3%7D.jpg">
        </div>
    </div>
    </body>
    </html>
    View Code
  • 相关阅读:
    IPC框架分析 Binder,Service,Service manager
    Android语音系列:编译Speex框架
    Android核心分析(21)Android应用框架之Android Application
    支付宝 移动支付
    对象、视频、音频的传输RTMP协议研究
    ffmpeg 移植篇笔记
    iPhone UI 设计篇(一)
    Service深入分析
    CSS注意事项
    关于文本断行的样式
  • 原文地址:https://www.cnblogs.com/kelly007/p/5072219.html
Copyright © 2020-2023  润新知