css3 3D变换和动画

时间：2015-10-17 10:38:29 阅读：199 评论：0 收藏：0 [点我收藏+]

标签：

3D变换和动画

建立3D空间，transform-style： preserve-3d
perspective： 100px; 景深
perspective-origin：center center -180px; 景深基点
transform新增函数如下：
- rotateX();
- rotateY();
- rotateZ();
- translateZ();
- scaleZ();

3d动画demo，只支持Webkit内核，可自行运行查看效果

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        .wrap { width: 100px; height: 100px; -webkit-perspective: 200px; border: 5px solid pink; padding: 100px; margin: 200px auto 0; -webkit-transform: scale(2);}
        #box {width: 100px; height: 100px;  position: relative; text-align: center; line-height: 100px; -webkit-transform-style: preserve-3d; transition: 3s; -webkit-transform-origin: center center -50px;}
        #box div {width: 100px; height: 100px; position: absolute; font-size: 50px; color: #FFF;}
        #box div:nth-of-type(1) {background-color: #F90; left: 0px; top: 0px;}
        #box div:nth-of-type(2) {background-color: #E08; left: 0px; top: -100px; -webkit-transform-origin: bottom; -webkit-transform: rotateX(90deg);}
        #box div:nth-of-type(3) {background-color: #A01; left: -100px; top: 0px; -webkit-transform-origin: right; -webkit-transform: rotateY(-90deg);}
        #box div:nth-of-type(4) {background-color: #CC0; left: 100px; top: 0px; -webkit-transform-origin: left; -webkit-transform: rotateY(90deg);}
        #box div:nth-of-type(5) {background-color: #D34; left: 0px; top: 100px; -webkit-transform-origin: top; -webkit-transform: rotateX(-90deg);}
        #box div:nth-of-type(6) {background-color: #000; left: 0px; top: 0px; -webkit-transform: translateZ(-100px) rotateX(180deg);}
        .wrap:hover  #box{-webkit-transform: rotateX(360deg);}
    </style>
    <script>
        window.onload = function() {
            var oBox = document.getElementById("box");
            oBox.style.WebkitTransform = "rotateX(360deg)";
            addEnd(oBox, end1);

            function end1() {
                addEnd(oBox, end2);
                oBox.style.WebkitTransform = "rotateX(0deg)";
            }

            function end2() {
                addEnd(oBox, end3);
                oBox.style.WebkitTransform = "rotateY(360deg)";
            }

            function end3() {
                oBox.style.WebkitTransform = "rotateY(0deg)";
            }

            function addEnd(obj, fn) {
                obj.addEventListener(‘WebkitTransitionEnd‘, fn, false);
                obj.addEventListener(‘transitionend‘, fn, false);
            }

            function removeEnd(obj, fn) {
                obj.removeEventListener(‘WebkitTransitionEnd‘, fn, false);
                obj.removeEventListener(‘transitionend‘, fn, false);
            }
        };
    </script>
</head>
<body>
    <div class="wrap">
        <div id="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>
</html>

css3 3D变换和动画

标签：

原文地址：http://www.cnblogs.com/donghualei/p/4882925.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行