8.28学习笔记

时间：2018-08-28 21:04:11 阅读：198 评论：0 收藏：0 [点我收藏+]

transform：rotate（）

perspective：透视的虚拟距离。 number

这个属性给3d效果元素的父级

transform-style：preserve-3d；元素的子集呈3d效果。

backface-visibility：hidden/visible；背面可见和背面不可见。

技术分享图片

正面体 3d 旋转的源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                perspective: 2000px;
            }
            .aa{
                width: 400px;
                height: 400px;
                margin: 200px auto;
                position: relative;
                transform-style: preserve-3d;
                animation: zkl 4s linear infinite;
            }
            .aa>div{
                position: absolute;
                top: 0px;
                left: 0px;
            }
            .aa>div:nth-of-type(1){
                width: 400px;
                height: 400px;
                background: pink;
                transform: rotateX(90deg) translateZ(200px);
            }
            .aa>div:nth-of-type(2){
                width: 400px;
                height: 400px;
                background: yellow;
                transform: rotateX(90deg) translateZ(-200px);
            }
            .aa>div:nth-of-type(3){
                width: 400px;
                height: 400px;
                background: brown;
                transform: rotateY(90deg) translateZ(200px);
            }
            .aa>div:nth-of-type(4){
                width: 400px;
                height: 400px;
                background: gray;
                transform: rotateY(90deg) translateZ(-200px);
            }
            .aa>div:nth-of-type(5){
                width: 400px;
                height: 400px;
                background: green;
                transform:translateZ(200px);
            }
            .aa>div:nth-of-type(6){
                width: 400px;
                height: 400px;
                background: red;
                transform:translateZ(-200px);
            }
            @-webkit-keyframes zkl{
                from{transform: rotateX(0) rotateY(0) rotateZ(0);}
                to{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
            }
        </style>
    </head>
    <body>
        <div class="aa">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            
        </div>
    </body>
</html>

8.28学习笔记

原文：https://www.cnblogs.com/zhangkelei/p/9546355.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)