css3的3D位移效果讲解

最新推荐文章于 2024-03-20 15:35:46 发布

晓明的日常操作

最新推荐文章于 2024-03-20 15:35:46 发布

阅读量406

点赞数

分类专栏： css3 文章标签： css html

本文链接：https://blog.csdn.net/wangming2531/article/details/109012206

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D位移的Demo</title>
    <style>
        /*
            perspective  定义3d元素距离视图的距离  以像素为单位
            当给一个元素定义perspective属性的时候，其*子元素*就获得了一个透视效果，元素本身并没有
            设置人眼到屏幕平面的距离，只影响3d元素，不影响2d元素
            所以该样式属性要设置在父元素上，其子元素才有3d效果
        */
        #experiment{/*父*/
            /*-webkit-*/
            -webkit-perspective: 800px;
            -webkit-perspective-origin: center;
            /*
            transform-style:使被转换的子元素保留其3d转换位置
            取值：flat(默认值) - 子元素不保留3d位置
            preserve-3d -  。。。。保留3d位置
            */
            -webkit-transform-style: preserve-3d;
        }
        #block{
            width:200px;
            height:200px;
            background-color: pink;
            margin:100px auto;
        }
        #op{
            text-align: center;
        }
        #op input{
            width:800px;
        }
    </style>
    <script>
        function translateall(){
            // console.log(1);
        //    获得x,y,z轴上的坐标值
            var x=document.getElementById("translateX").value;
            var y=document.getElementById("translateY").value;
            var z=document.getElementById("translateZ").value;
            // console.log(x,y,z);
            /*  改变元素在z轴上的位置
            *   属性：transform
            *   函数：translateZ(z)
            *       translate(x,y)
            *       translate3d(x,y,z)
            * */
            document.getElementById("block").style.transform="translate3d("+x+"px,"+y+"px,"+z+"px)";
            document.getElementById("translatex-span").innerText=x;
            document.getElementById("translatey-span").innerText=y;
            document.getElementById("translatez-span").innerText=z;
        }
    </script>
</head>
<body>
<div id="experiment">
    <div id="block">

    </div>
</div>
<div id="op">
    <p>translate x: <span id="translatex-span">0</span>px</p>
    <input type="range" min="-360" max="360" id="translateX" value="0" onmousemove="translateall()"/><br/>
    <p>translate y: <span id="translatey-span">0</span>px</p>
    <input type="range" min="-360" max="360" id="translateY" value="0" onmousemove="translateall()"/><br/>
    <p>translate z: <span id="translatez-span">0</span>px</p>
    <input type="range" min="-360" max="360" id="translateZ" value="0" onmousemove="translateall()"/><br/>
</div>
</body>
</html>

晓明的日常操作

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3的3D位移效果讲解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D位移的Demo</title> <style> /* perspective 定义3d元素距离视图的距离以像素为单位当给一个元素定义perspective属性的时候，其*子元素*就获得了一
复制链接

扫一扫