国庆期间自己练习的心得

国庆这几天在家好好研究了一下c3的操作，简单说是这样的，在css的基础上就是增加了一下属性值；比如我国庆做的一个盒子3d旋转的效果就是六个div盒子，设置各自的属性值，然后设置鼠标划去的hover效果,然后设置六个div的旋转度和动画进度的旋转值,代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .stage {
                height: 100px;
                width: 100px;
                margin: 600px auto;
                position: relative;//设置相对定位
                perspective: 300px;
            }
            .container {
                transform-style: preserve-3d;//设置动画的3d属性
            }
            .container:hover {
                animation: spin 2s linear infinite;//鼠标划上去的执行的时间
            }
            .side {
                background: rgba(255,0,0,0.3);
                border: 1px solid red;
                font-size: 60px;
                font-weight: bold;
                color: #fff;
                text-align: center;
                height: 196px;
                line-height: 196px;
                width: 196px;
                position: absolute;
                text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
                text-transform: uppercase;
            }
//设置六个属性的拼接在一起的距离值和旋转度的值
            .front {
                background: url(img/2.jpg);
                transform: translateZ(100px);//代表属性的距离
            }
            .back {
                background: url(img/1.jpg);
                transform: rotateX(180deg)/*这代表属性的x轴的旋转度*/ translateZ(100px);
            }
            .left {
                background: url(img/3.jpg);
                transform: rotateY(-90deg)/*这代表属性的y轴的旋转度*/ translateZ(100px);
            }
            .right {
                background: url(img/4.jpg);
                transform: rotateY(90deg) translateZ(100px);
            }
            .top {
                background: url(img/5.jpg);
                transform: rotateX(90deg) translateZ(100px);
            }
            .bottom {
                transform: rotateX(-90deg) translateZ(100px);
            }
//最后设置动画的进度的旋转
            @keyframes spin{
                0%{transform: rotateY(0deg)rotateX(0deg);}
                50%{transform: rotateY(180deg)rotateX(180deg);}
                100%{transform: rotateY(360deg)rotateX(360deg);}
            }
        </style>
    </head>
    <body>
        <div class="stage">
            <div class="container">
                <div class="side front">前面</div>
                <div class="side back">背面</div>
                <div class="side left">左面</div>
                <div class="side right">右面</div>
                <div class="side top">顶面</div>
                <div class="side bottom">底面</div>
            </div>
        </div>
    </body>
</html>

这是我国庆期间做的一个c3的盒子3d旋转效果

国庆期间自己练习的心得

推荐阅读更多精彩内容