3D效果-HTML+CSS

浏览数：25 / 时间：2015年06月09日

本文使用图片均为500px*500px

如图

技术分享

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    	*{
    		padding: 0px;
    		margin: 0px;
    	}
    	body {
    		height: 100%;
    		width: 100%;
    	}
        #leftDiv {
        	margin:50px auto;
            width: 100%;
            height: 500px;
            -webkit-perspective: 800;
            -moz-perspective: 800;
            -moz-perspective-origin: 50% 50%;
        }


        #stage {
            width: 100%;
            height: 100%;
            -webkit-perspective: 800; /*Z轴呈现距离*/
            -moz-perspective: 800;
            -webkit-perspective-origin: 100% 50%; /*Z轴固定时 x 和 y的呈现方式 默认在元素平面的中心50% 50%*/
            -moz-perspective-origin: 50% 50%;
            -webkit-transform-style: preserve-3d; /*3D呈现*/
            -moz-transform-style: preserve-3d;
            -webkit-transition: -webkit-transform 2s;
            -moz-transition: -webkit-transform 2s;
        }

        #shape {
            position: relative;
            top: 160px;
            margin: 0 auto;
            height: 200px;
            width: 200px;
            -webkit-transform-style: preserve-3d; /*3D形式呈现*/
            -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .plane {
            position: absolute;
            left: 0;
            top: 0;
            height: 200px;
            width: 200px;
            border: 1px solid white;
            /*-webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;*/
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            font-family: Times, serif;
            font-size: 14px;
            color: black;
            background-color: rgba(67, 181, 180, 0.60);
            -webkit-transition: -webkit-transform 2s, opacity 2s;
            -moz-transition: -webkit-transform 2s, opacity 2s;
            -webkit-backface-visibility: visible; /*是否呈现元素的背面*/
            -moz-backface-visibility: visible;
        }


        .one {
            opacity: 0.5;
            -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px); /*3D变化遵循先后顺序 如果是多次变化需要按照 后面的需要根据前一次变化的结果再重新定义*/
            -moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
        }

        .two {
            opacity: 0.5;
            -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
            -moz-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
        }

        .three {
            opacity: 0.5;
            -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
            -moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
        }

        .four {
            opacity: 0.5;
            -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
            -moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
        }

        .five {
            opacity: 0.5;
            /*-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
            -moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);*/
            -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(-100px);
            -moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(-100px);
        }

        .six {
            opacity: 0.5;
            /*-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
            -moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);*/
            -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(-100px);
            -moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(-100px);
        }

        #shape img {
            width: 200px;
            height: 200px;
            /*border-radius: 50px;*/
        }

        #shape.backfaces .plane {
            -webkit-backface-visibility: visible;
            /*-webkit-backface-visibility: visible;*/
            -moz-backface-visibility: visible;
        }

        .cddd {
            -webkit-animation: spin 7s infinite linear;
            -moz-animation: spin 7s infinite linear;
        }

        @-webkit-keyframes spin {
            from {
                -webkit-transform: rotateX(0) rotateY(0);
                -moz-transform: rotateX(0) rotateY(0);
            }

            to {
                -webkit-transform: rotateX(360deg) rotateY(360deg);
                -moz-transform: rotateX(360deg)rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="leftDiv">
        <div id="stage">
            <div id="shape" class="cddd">
                <div class="plane one"><img src="images/1.png"></div>
                <div class="plane two"><img src="images/2.png"></div>
                <div class="plane three"><img src="images/3.png"></div>
                <div class="plane four"><img src="images/4.png"></div>
                <div class="plane five"><img src="images/5.png"></div>
                <div class="plane six"><img src="images/6.png">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

3D效果-HTML+CSS