【CSS3】视觉角度

最新推荐文章于 2023-08-11 22:40:22 发布

weixin_34148340

最新推荐文章于 2023-08-11 22:40:22 发布

阅读量238

点赞数

原文链接：https://juejin.im/post/5cd0eab8f265da039955f1e8

版权

2d基点位置 transform-origin

transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。

0.原状态

1.默认基点位置为元素的中心点

transform: rotate(45deg);

)

2.像素值改变基点位置

transform: rotate(45deg);

transform-origin: 0 0;
复制代码

3.用位置描述来改变基点位置

transform: rotate(45deg);

transform-origin: top center;
复制代码

4.百分比改变基点位置

transform: rotate(45deg);

transform-origin: 100% 100%;
复制代码

3d透视距离 Perspective

属性作用：透视，可以近似理解为视图与人眼的距离。

滑动开关，调整与人眼的距离。

将以下代码复制到浏览器环境中执行体验。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
.control {
  text-align: center;
}
.stage {
  margin:auto;
  perspective: 200px;
  position: relative;
  width:400px;
}
.actor {
  /* position: absolute; */
  width: 400px;
  height: 400px;
  background-color: rgba(255, 100, 100, 0.5);
}
</style>
<body>
  <div class="control">
      <input type="range" onchange="fn(value)" max="250" min="0" value="0">
  </div>
  <div class="stage">
    <div class="actor"></div>
  </div>
  <script>
    let divStyle = document.getElementsByClassName('actor')[0].style
    function fn (value) {
      divStyle.transform = 'translateZ(' + value + 'px)'
    }
  </script>
</body>
</html>
复制代码

3d舞台 transform-style

Transform-style: preserve-3d

属性作用：保存子元素的3D效果。

旋转的立方体。

将以下代码复制到浏览器环境中执行体验。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container{
                width: 500px;
                margin: 50px auto;
            }
            .cub{
                position: relative;
                width: 100px;
                height: 100px;
                transform-style: preserve-3d;
                -webkit-transform-style: preserve-3d;
                transition: all 5s linear;
            }
            .cub div{
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                transform-style: preserve-3d;
                -webkit-transform-style: preserve-3d;
                border: 1px solid #46B8DA;
                opacity: 0.5;
            }
            .one{
                transform: rotateY(0deg) translateZ(50px);
            }
            .two{
                transform: rotateY(180deg) translateZ(50px);
            }
            .three{
                transform: rotateX(90deg) translateZ(50px);
            }
            .four{
                transform: rotateX(-90deg) translateZ(50px);
            }
            .five{
                transform: rotateY(90deg) translateZ(50px);
            }
            .six{
                transform: rotateY(-90deg) translateZ(50px);
            }
            .cub:hover{
                transform: rotateX(360deg) rotateY(360deg);
                -webkit-transform: rotateX(360deg) rotateY(360deg);
            }

            /* .cub:hover .one{
                transform: rotateY(0deg) translateZ(100px);
            }
            .cub:hover .two{
                transform: rotateY(180deg) translateZ(100px);
            }
            .cub:hover .three{
                transform: rotateX(90deg) translateZ(100px);
            }
            .cub:hover .four{
                transform: rotateX(-90deg) translateZ(100px);
            }
            .cub:hover .five{
                transform: rotateY(90deg) translateZ(100px);
            }
            .cub:hover .six{
                transform: rotateY(-90deg) translateZ(100px);
            } */
        </style>
    </head>
    <body>
        <div class="container">
            <div class="cub">
                <div class="one" style="background-color: #FFC0CB"></div>
                <div class="two" style="background-color: #449D44"></div>
                <div class="three" style="background-color:#46B8DA"></div>
                <div class="four" style="background-color: #9E90EE"></div>
                <div class="five" style="background-color: #C0A16B"></div>
                <div class="six" style="background-color: #D6E9C6"></div>
            </div>
        </div>
    </body>
</html>

复制代码

3d视觉方位perspective-origin

空间内的视觉方位

perspective-origin: 25% 75%;
复制代码

立方体的透视效果图

3d穿透backface-visibility

穿透可视

在C3中，我们可以看到A物体后面的B物体，而在现实世界中，我们无法穿透，故多重3d元素的情况下，记得做如下设置：

backface-visibility:hidden;
复制代码

本文主要参考自张鑫旭老师

举起手手点赞的人，注意下，我看到了你的内涵

转载于:https://juejin.im/post/5cd0eab8f265da039955f1e8

weixin_34148340

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS3】视觉角度

2d基点位置 transform-origintransform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。0.原状态1.默认基点位置为元素的中心点transform: rotate(45deg);)2.像素值改变基点位置transform: rotate(45deg);transform-origin: 0 0;复制...
复制链接

扫一扫