transform属性——css3变形效果3D

最新推荐文章于 2024-06-19 09:58:25 发布

霜月枫桥

最新推荐文章于 2024-06-19 09:58:25 发布

阅读量3.8k

点赞数

分类专栏： CSS&CSS3 文章标签： transform

本文链接：https://blog.csdn.net/MOONCOM/article/details/54564576

版权

CSS&CSS3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

由于3D是立体三维，在x、y轴的基础上一般会多出一个z轴，深入跃出轴。
要使用transform实现3D效果，首先需要为该元素或该元素的直接父元素设置如下2个属性属性
1、transform-style     该属性是指定嵌套元素如何在3D空间中呈现
属性值： flat            默认值，表示所有子元素在2D平面呈现
          preserve-3d     表示子元素在3D空间呈现
2、perspective         该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而
投放到一个2D平面上。
属性值： none            默认值，表示无限的角度来看3D物体，但看上去是平的
          长度值          接受一个长度单位大于0的值，其单位不能为百分比。值越大，角
      度出现的越远，3D物体越小，直至3D原有的大小
以上两个属性的示例如下：
eg. div{
        perspective:1000px;
   transform-style:preserve-3d;
}
注意：上面的两个值设置在该元素，或该元素的直接父元素中，显示的效果是不一样的。

一、translate3d(x,y,z)   必须写三个参数，且这三个参数可以为负值
eg. img{
        transform:translate3d(100px,100px,300px);
}
还可以直接写translateZ(),这样默认x和y轴的值为0
eg. img{
        transform:translateZ(-300px);
}

二、scale3d(x,y,z)       3D缩放，单独设置无效，需要配合角度
eg. img{
        transform:scale3d(1,1,1.5) rotateX(45deg);
}
scaleZ(z)            单独设置z轴，x和y轴默认为1
eg. img{
        transform:scaleZ(1.5) rotateX(45deg);
}

三、rotate3d(x,y,z,a)    设置3D旋转，a表示角度，xyz是0或1之间的数值
eg. img{
        transform:rotate3d(1,0,0,45deg);
}
rotateX(a)、rotateY(a)、rotateZ(a)     单独设置3D旋转，可以分开写，也可写在一起
eg. img{
        //transform:rotateX(45deg);
   transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}

perspective-origin   改变3D元素变形的基准点，默认是元素的中心位置，如果改变了基准点。
它就会按照这个基准点进行变形。
属性值可以使用关键字，也可以使用百分数和具体值
关键字如下：
1、指定x轴的位置     left、center、right
2、指定y轴的位置     top、center、bottom
eg. div{
        perspective-origin:left top;
   perspective-origin:0px 0px;
   perspective-origin:0% 0%;
}

注意：

1、目前浏览器都不支持 perspective-origin 属性。

Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴(属性值只有两个)。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

2、使用属性perspective和perspective-origin，受影响的是子元素，而非元素本身
但是可以在元素的transform属性中使用perspective，此时perspective作用的是该元素本身。注意，perspective要写在最前面。
transform:perspective(400px) rotateY(40deg);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0px;
            background-color: #333;
        }
        #demo{
            position: relative;
            height: 50px;
            width: 400px;
            margin: 100px auto;
            background: linear-gradient(90deg,rgb(204,0,0),#333);

        }
        #demo::before{
            content: "";
            display: block;
            position: absolute;
            left: -50px;
            border: 25px solid transparent;
            border-right-color:rgb(204,0,0) ;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <script>
        var oDemo=document.getElementById("demo");

    </script>
</body>
</html>

霜月枫桥

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
transform属性——css3变形效果3D

由于3D是立体三维，在x、y轴的基础上一般会多出一个z轴，深入跃出轴。要使用transform实现3D效果，首先需要为该元素或该元素的直接父元素设置如下2个属性属性1、transform-style 该属性是指定嵌套元素如何在3D空间中呈现属性值： flat 默认值，表示所有子元素在2D平面呈现 preserve-3d 表示
复制链接

扫一扫

专栏目录