CSS3：过渡、转换、动画、3D转换

最新推荐文章于 2024-03-12 13:32:46 发布
Irene1991
最新推荐文章于 2024-03-12 13:32:46 发布
阅读量243
点赞数
分类专栏：前端开发文章标签： css3
原创文章如需转载请注明地址。
本文链接：https://blog.csdn.net/Irene1991/article/details/106717938
版权
前端开发专栏收录该内容
54 篇文章 1 订阅
订阅专栏
CSS3：过渡、转换、动画、3D转换
前端效果

源码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3测试</title>
    <style>
        body{
           background: #f7f7f7;
        }

        h1{
           font-size: 16px;
        }

        table{
            margin: 0 auto;
            border: 1px solid #3a7408;
        }

        table tr td{
            padding:30px;
            border: 1px solid #3a7408;
        }

        div.test{
            width:100px;
            height:100px;
            line-height: 100px;
            text-align: center;
            color: #fff;
            border: 1px solid #999;
            cursor: pointer;
        }

        div.test1{
            background: linear-gradient(skyblue, khaki);
            transition: width 2s,height 2s;
            -moz-transition: width 2s,height 2s; /* Firefox 4 */
            -webkit-transition: width 2s,height 2s; /* Safari 和 Chrome */
            -o-transition: width 2s,height 2s; /* Opera */
        }

        div.test1:hover{
            width:200px;
            height:200px;
        }

        div.test2{
            background: #ff0000;
        }

        div.test2:hover{
            transform:rotate(180deg);
            -moz-transform:rotate(180deg); /* Firefox 4 */
            -webkit-transform:rotate(180deg); /* Safari and Chrome */
            -o-transform:rotate(180deg); /* Opera */
        }

        div.test3{
            background: #85fd5d;
            transition: transform 2s;
        }

        div.test3:hover{
            transform:translate(100px,100px);
        }

        div.test4{
            background: #e8851d;
            transition: transform 2s;
        }

        div.test4:hover{
            transform:scale(0.5);
        }

        div.test5{
            background: #000022;
            transition: transform 2s;
        }

        div.test5:hover{
            transform: skew(30deg,20deg);
        }

        div.test6{
            background: #2f7ff7;
            transition: transform 2s;
        }

        div.test6:hover{
            transform-style:preserve-3d;
            transform:rotate3d(1,1,1,180deg);
        }

        div.test7{
            background: #13E8E9;
            position: relative;
        }

        div.test7:hover{
            animation: animated_div 5s 1;
            -moz-animation: animated_div 5s 1;	/* Firefox */
            -webkit-animation: animated_div 5s 1;	/* Safari 和 Chrome */
            -o-animation: animated_div 5s 1;
        }

        @keyframes animated_div
        {
            0%		{transform: rotate(0deg);left:0;}
            25%		{transform: rotate(90deg);left:300px;background: #e8851d}
            50%		{transform: rotate(180deg);left:600px;background:#85fd5d;}
            75%		{transform: rotate(90deg);left:300px;background: #ff0000;}
            100%	{transform: rotate(0deg);left:0;}
        }

        select{
            width:200px;
            height:40px;
            line-height: 40px;
            margin-right:120px;
        }

        div.transition-all{
            width:200px;
            height:200px;
            perspective: 550px;
            transform-style: preserve-3d;
            transition:all 0.3s ease-in;
            cursor: pointer;
        }

        div.transition-all-square{
            width:100px;
            height:100px;
            perspective: 550px;
            transform-style: preserve-3d;
            transition:all 0.3s ease-in;
            cursor: pointer;
        }

        div.transition-all-square:hover{
            transform:rotate3d(1, 1, 1, 45deg);
        }

        div.transition-all:hover{
            transform:rotate3d(1, 1, 1, 45deg);
        }

        div.face{
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            border: 1px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            backface-visibility: inherit;
            font-size: 20px;
            color: #fff;
        }

        div.front{
            background: rgba(90,90,90,.7);
            transform: translateZ(50px);
        }

        div.back{
            background: rgba(0,210,0,.7);
            transform: rotateY(180deg) translateZ(50px);
        }

        div.right{
            background: rgba(210,0,0,.7);
            transform: rotateY(90deg) translateZ(50px);
        }

        div.left{
            background: rgba(0,0,210,.7);
            transform: rotateY(-90deg) translateZ(50px);
        }

        div.top{
            background: rgba(210,210,0,.7);
            transform: rotateX(90deg) translateZ(50px);
        }

        div.bottom{
            background: rgba(210,0,210,.7);
            transform: rotateX(-90deg) translateZ(50px);
        }
        </style>
</head>
<body>
    <table>
        <tr>
            <td>
                <h1>过渡：transition =》宽高改变</h1>
                <div class="test test1">test1</div>
            </td>
            <td>
                <h1>转换：transform =》顺时针旋转180度</h1>
                <div class="test test2">test2</div>
            </td>
            <td>
                <h1>过渡+转换 =》向右下平移100px</h1>
                <div class="test test3">test3</div>
            </td>
        </tr>
        <tr>
            <td>
                <h1>过渡+转换 =》缩小至原来的0.5倍</h1>
                <div class="test test4">test4</div>
            </td>
            <td>
                <h1>过渡+转换 =》围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。</h1>
                <div class="test test5">test5</div>
            </td>
            <td>
                <h1>过渡+3D转换 =》rotate3d(1,1,1,180deg)</h1>
                <div class="test test6">test6</div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <h1>动画：@keyframes</h1>
                <div class="test test7">test7</div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <h1>正方体</h1>
                <div class="transition-all-square">
                    <div class="face front">前</div>
                    <div class="face back">后</div>
                    <div class="face right">右</div>
                    <div class="face left">左</div>
                    <div class="face top">上</div>
                    <div class="face bottom">下</div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <h1>正方体</h1>
                <div style="display: flex;justify-content: flex-start;flex-direction: row;">
                    <div>
                        <select id="selectRotate" onchange="selectRotate()">
                            <option value="1">rotate3d(0)</option>
                            <option value="2">rotate3d(1, 1, 1, 45deg)</option>
                            <option value="3">rotate3d(2, -1, -1, -0.2turn)</option>
                            <option value="4">rotate3d(0, 1, 0.5, 3.142rad)</option>
                        </select>
                    </div>
                    <div class="transition-all">
                        <div class="face front">前</div>
                        <div class="face back">后</div>
                        <div class="face right">右</div>
                        <div class="face left">左</div>
                        <div class="face top">上</div>
                        <div class="face bottom">下</div>
                    </div>
                </div>
            </td>
        </tr>
    </table>

<script>
    function selectRotate(){
        var doc=document;
        var opts=doc.getElementById("selectRotate");
        for(var i=0;i<4;i++){
            if(opts[i].selected){
                doc.getElementsByClassName("transition-all")[0].style = "transform:"+opts[i].innerHTML;
                return;
            }
        }
    }
</script>
</body>
</html>