前端学习CSS3(day3)3D转换

最新推荐文章于 2023-04-12 15:28:00 发布

熊熊举高高

最新推荐文章于 2023-04-12 15:28:00 发布

阅读量347

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_41571938/article/details/115562772

版权

基础知识跟2D转换差不多只是比2D多了一个Z的参数，这里不再叙述，就提一些3D独有的
透视/景深效果
perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。
perspective-origin属性规定了镜头在平面上的位置。
transform-style：使被转换的子元素保留其 3D 转换(需要设置在父元素中) flat 子元素将不保留其 3D 位置-平面方式。
preserve-3d 子元素将保留其 3D 位置—立体方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 200px;
            margin-top:10px;
            /*添加过渡*/
            transition: transform 2s;
        }
        /*添加三维移动--3D移动*/
        div:first-of-type:active{
            /*translate3d(X方向的偏移，Y方向的偏移，Z方向的偏移)*/
            /*transform: translate3d(400px,0,0);*/
            /*transform: translate3d(400px,400px,0);*/
            transform: translate3d(100px,0px,400px);
        }
        /*添加三维缩放*/
        div:nth-of-type(2):active{
            /*scale3d(x方向上的缩放，y方向的缩放，z方向的缩放)
            >1.01 放大   <0.99 缩小*/
            /*transform:scale3d(2,0.5,10);*/
            transform:scale3d(1,2,10);
        }
        /*添加三维旋转*/
        div:nth-of-type(3):active{
            /*rotate3d(x,y,z,angle):
            x:代表x轴方向上的一个向量值
            y:代表y轴方向上的一个向量值
            z:代表z轴方向上的一个向量值*/
            transform: rotate3d(1,1,1,330deg);
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>

熊熊举高高

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端学习CSS3(day3)3D转换

基础知识跟2D转换差不多只是比2D多了一个Z的参数，这里不再叙述，就提一些3D独有的透视/景深效果perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。perspective-origin属性规定了镜头在平面上的位置。transform-style：使被转换的子元素保留其 3D 转换(需要设置在父元素中) flat 子元素将不保留其 3D 位置-平面方式。preserve-3d 子元素将保留其 3D 位置—立体方式。<!DOCTYP
复制链接

扫一扫