深刻理解css3中backface-visibility的作用

最新推荐文章于 2022-11-25 20:46:24 发布

网站开发者

最新推荐文章于 2022-11-25 20:46:24 发布

阅读量387

点赞数

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

本文链接：https://blog.csdn.net/mengzhanfei1/article/details/112388497

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

深刻理解css3中backface-visibility的作用

<!DOCTYPE html>
<html>
<head>
    <title>深刻理解css3中backface-visibility的作用</title>
    <style>
        #dh
        {
            width:100px;
            height:100px;
            background-color:#ddd;
            border:1px solid black;
            transform:rotateY(0deg);
            transition: 10s;
        }
        #dh .a{
            width:141.5px;
            height:1px;
            background: #ff0000;
            transform: rotate(45deg);
            transform-origin: left top;
        }
    </style>

    <script>
        function rotate(value)
        {
            document.getElementById('dh').style.transform="rotateY(" + value + "deg)";
            document.getElementById('span1').innerHTML=value + "deg";
        }
        function checkBackface()
        {
            if (document.getElementById("bf").checked==true)
            {
                document.getElementById('dh').style.backfaceVisibility="hidden";
            }
            else
            {
                document.getElementById('dh').style.backfaceVisibility="visible";
            }
        }
    </script>
</head>
<body>

<div id="dh">
    <div class="a"></div>
</div>

<div>
    隐藏背面
    <input type="checkbox" onchange="checkBackface()" id="bf" />
</div>

<hr>
旋转动画:
<input type="range" min="-360" max="360" value="0" onchange="rotate(this.value)" />
<hr>
transform: rotateY(<span id="span1">0deg</span>)


</body>
</html>

网站开发者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
深刻理解css3中backface-visibility的作用

深刻理解css3中backface-visibility的作用<!DOCTYPE html><html><head> <title>深刻理解css3中backface-visibility的作用</title> <style> #dh { width:100px; height:100px; background
复制链接

扫一扫