3D转换-CSS





Document




3D转换有以下几个主要的属性：
1.transform-style: preserve-3d; 想要看到3d效果，就需要在父类上加这个属性
2.transform: rotateY(60deg) translateZ(200px); 关于3d的一些位置变化与2d类似

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #gk{
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50%;
            margin-left: -100px;
            /*要想看出3D效果就一定要在其父类上加这个属性,默认是flat,2d状态*/
            transform-style: preserve-3d;
            /*动画属性 动画名 时长 运动曲线 延迟 无限循环 非乒乓*/
            animation: sport 18s linear 0s infinite normal;
        }
        @keyframes sport {
            from{
                /*
                注意点:
                1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
                2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面
                */
                transform: rotateX(-10deg) rotateY(0deg);
            }
            to{
                transform: rotateX(-10deg) rotateY(360deg);
            }
        }
        #gk li{
            list-style: none;
            width: 200px;
            height: 200px;
            background: #000;
            position: absolute;
        }
        #gk li img{
            width: 200px;
            height: 200px;
            border: 5px solid skyblue;
            opacity: 1;
        }
        #gk:hover{
            /*动画暂停*/
            animation-play-state: paused;
        }
        #gk:hover li img{
            opacity: 0.5;
        }
        #gk li:hover img{
            opacity: 1;
        }
        #gk li:nth-child(1){
            /*围绕Y轴旋转，在沿着Z轴偏移*/
            transform: rotateY(60deg) translateZ(200px);
        }
        #gk li:nth-child(2){
            transform: rotateY(120deg) translateZ(200px);
        }
        #gk li:nth-child(3){
            transform: rotateY(180deg) translateZ(200px);
        }
        #gk li:nth-child(4){
            transform: rotateY(240deg) translateZ(200px);
        }
        #gk li:nth-child(5){
            transform: rotateY(300deg) translateZ(200px);
        }
        #gk li:nth-child(6){
            transform: rotateY(360deg) translateZ(200px);
        }
    </style>
</head>
<body>
<ul id="gk">
    <li><img src="http://gkismet.com/wp-content/uploads/2017/01/z1.jpg" alt=""></li>
    <li><img src="http://gkismet.com/wp-content/uploads/2017/01/z2.jpg" alt=""></li>
    <li><img src="http://gkismet.com/wp-content/uploads/2017/01/z3.jpg" alt=""></li>
    <li><img src="http://gkismet.com/wp-content/uploads/2017/01/z4.jpg" alt=""></li>
    <li><img src="http://gkismet.com/wp-content/uploads/2017/01/z5.jpg" alt=""></li>
    <li><img src="http://gkismet.com/wp-content/uploads/2017/01/z6.jpg" alt=""></li>
</ul>
</body>
</html>