CSS3的景深和transform 属性

最新推荐文章于 2023-02-08 10:37:57 发布

23号婷儿

最新推荐文章于 2023-02-08 10:37:57 发布

阅读量886

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_46179838/article/details/104360238

版权

一、transform是什么

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。主要是CSS3的内容，在运用之前需要加上transform-style 属性，它能规定如何在 3D 空间中呈现被嵌套的元素，属性值preserve-3d：子元素将保留其 3D 位置
flat：子元素将不保留其 3D 位置。

二、transform 属性值

rotateX(数字deg) 定义沿着 X 轴的 3D 旋转。（X、Y、Z的意思和用法相同）
translateX(数字px) 定义 3D 转换，只是用 X轴的值。（X、Y、Z的意思和用法相同）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D盒子</title>
    <style>
        *{
   
            padding:0;
            margin:0;
        }
        .box{
   
            position:relative;
            width:300px;
            height:300px;
            border:2px solid black;
            margin:80px auto;
            perspective: 800px;     /* 景深 */
            transform-style: preserve-3d;      /* 让我的元素成3D在舞台上呈现 */
        }
        .item1

最低0.47元/天解锁文章

23号婷儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3的景深和transform 属性

一、transform是什么transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。主要是CSS3的内容，在运用之前需要加上transform-style 属性，它能规定如何在 3D 空间中呈现被嵌套的元素，属性值preserve-3d：子元素将保留其 3D 位置flat：子元素将不保留其 3D 位置。二、transform 属性值rota...
复制链接

扫一扫