css：transform的3D变换属性

最新推荐文章于 2024-09-06 13:58:20 发布

牛奶面包吖

最新推荐文章于 2024-09-06 13:58:20 发布

阅读量983

点赞数

分类专栏： css 文章标签： css 3d css3

本文链接：https://blog.csdn.net/qq_50487248/article/details/130066660

版权

本文详细介绍了CSS3的3D变换，包括perspective属性的使用，translate3d、rotate3d和scale3d的3D转换效果，以及backface-visibility、transform-style和perspective-origin等属性的应用，展示了3D变换如何创建丰富的视觉体验。

摘要由CSDN通过智能技术生成

1.空间三维坐标：

在文中之前，先介绍空间三维坐标，其中的坐标轴以及正负方向如图所示：
在这里插入图片描述

2.不可缺少的perspective属性

perspective属性:规定3D元素的透视效果，决定了网页中的元素是2D的变换还是3D的变换，不定义该属性，便没有3D效果。css 3D transform的透视点是在浏览器的前方,需要设置该元素或者该元素的父元素的perspective大小
perspective的两种写法：
1.在父元素上设置perspective大小再在子元素上写transfrom属性：
在这里插入图片描述
2.在当前元素上，与transform的其他属性写在一起。

3.translate3d（x,y,z)

translate3d（x,y,z)定义3D平移，x,y,z分别对应x轴、y轴、z轴的平移。
或者translateX（x)、translateY（y),translateZ（z)。

起始样式：

  <style>
    #father{
   
        width:300px;
        height: 300px;
        margin:100px auto;
        background-color: #0a6cd6;
    }
    #son{
   
        width: 200px;
        height: 200px;
        background-color: pink;
    }
  </style>
</head>
<body>
<div id=