CSS3_3D 变换

时间：2018-11-13 20:13:49 阅读：202 评论：0 收藏：0 [点我收藏+]

标签：tle height 代码 text har size scale 开启 line

3D 变换

在 2D 父元素中，效果需要想象

#ele_3d {
    width: 
    transform: rotateX(2deg);
}

rotateX 为正，元素左上角往里跑。。。对象在 x 轴上的旋转角度，正方向向右

rotateY 为正，元素左上角往外跑。。。对象在 x 轴上的旋转角度，正方向向上

rotateZ 为正，元素在视觉上顺时针旋转。。。对象在 z 轴上的旋转角度，正方向向屏幕外

给父元素设置 transform-style: preserve-3d; 开启 3D 空间

#box_3d {
    width: 300px;
    height: 300px;
    background-color: #f006;

    /* 开启 3D 空间 */
    transform-style: preserve-3d;
    
    /* 实现近大远小 :  景深 */
    perspective: 300;
}

- 景深中心点 perspective-origin: 50% 50%; （视锥顶点）
perspective 的值越大，元素的效果越接近于 2D 变换的效果。

translateZ(300px)
往景深里走，元素会越来越小
参数大于等于 0（不能为负）

scaleZ(2); // 会使元素的厚度变成 2 ，默认为 1。。。到 scaleZ(0); 时元素消失

给父元素设置景深
transform: perspective(300px);
给子元素设置景深
transform: perspectiv(300px) translate(-200px);

综合变换
变换基点 transform-origin: 50% 50% 0; ____几何元素最中心为 xyz点：
- transform-origin: top;
- transform-origin: left;
- transform-origin: right;
- transform-origin: bottom;
- transform-origin: 100px 100px 0; /* 变换基点的 z 只能使用具体数值 */
- transform-origin: top left;
- transform-origin: bottom right;

3D 旋转盒子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>3D 旋转盒子</title>

        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
                
                padding: 600px;
            }
            
            /**** CSS3 3D 盒子****/
            #six_3d_box {
                position: relative;
                width: 600px;
                height: 600px;
                
                transform-style: preserve-3d;    /* 开启 父元素 3D 空间 */
                
                transform-origin: 50% 50% -300px;
                
                list-style: none;
            }
            
            #six_3d_box li {
                position: absolute;
                width: 600px;
                height: 600px;
                
                line-height: 600px;
                text-align: center;
            }
            
            #six_3d_box li.one {
                top: 0px;
                left: 0px;
                
                background-color: #ddd3;
            }
            
            #six_3d_box li.two {
                top: -600px;
                left: 0px;
                
                transform-origin: 50% 100% 0;
                transform: rotateX(90deg);
                
                background-color: #ccc3;
            }
            
            #six_3d_box li.three {
                top: 0px;
                left: 600px;
                
                transform-origin: 0 50% 0;
                transform: rotateY(90deg);
                
                background-color: #eee3;
            }
            
            #six_3d_box li.four {
                top: 0px;
                left: -600px;
                
                transform-origin: 100% 50% 0;
                transform: rotateY(-90deg);
                
                background-color: #cfe3;
            }
            
            #six_3d_box li.five {
                top: 600px;
                left: 0px;
                
                transform-origin: 50% 0 0;
                transform: rotateX(-90deg);
                
                background-color: #efc3;
            }
            
            #six_3d_box li.six {
                top: 0px;
                left: 0px;
                
                transform: translateZ(-600px) rotateY(180deg);    /* 沉底 翻一面 */
                
                background-color: #afa3;
            }
            
            
        </style>
    </head>
    
    <body>
        
        <ul id="six_3d_box"> 
            <li class="one">1</li>
            <li class="two">2</li>
            <li class="three">3</li>
            <li class="four">4</li>
            <li class="five">5</li>
            <li class="six">6</li>
        </ul>

        <!-- javascript 代码 -->
        <script type="text/javascript">
            
            var theBox = document.getElementById("six_3d_box");
            var boxX = 0;
            var boxY = 0;
            
            var isRight = true;
            window.setInterval(function(){
                if(isRight){
                    boxX++;
                    boxY++;
                }else{
                    boxX--;
                    boxY--;
                };
                
                if(Math.abs(boxX) >= 360 || Math.abs(boxY) >= 360){
                    isRight = !isRight;
                };
                
                theBox.style.transform = "rotateX("+boxX+"deg) rotateY("+boxY+"deg)";
            },30);
            
        </script>
    </body>
</html>

CSS3_3D 变换

标签：tle height 代码 text har size scale 开启 line

原文地址：https://www.cnblogs.com/tianxiaxuange/p/9953849.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)

周排行