06-CSS3透视

最新推荐文章于 2024-04-24 13:47:46 发布

古塔前端

最新推荐文章于 2024-04-24 13:47:46 发布

阅读量337

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_45321331/article/details/106888267

版权

CSS3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是透视
我们写的css2D都是平面效果,无法做到立体的效果，如果想要做立体的效果，我们就需要z轴,直接添加z轴是没有效果的,需要在元素的父级元素上添加透视效果。
一个简单的透视代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 100px auto;
            transform: translateZ(100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

透视的特点:

透视需要加在元素的父级元素上
透视的单位是像素,像素越大,物体越小,像素越小,物体越大。
z轴越大,物体大小会变大,z轴越小，物体也会变小,z轴为负数时,物体会小于本身的大小。

3D旋转rotate
3D旋转最大的特点就是可以沿着x轴y轴或z轴旋转,也可以按着自定义的轴旋转。

transform:rotateX(180deg) 沿着x轴旋转180度
transform:rotateY(180deg) 沿着y轴旋转180度
transform:rotateZ(180deg) 沿着z轴旋转180deg
transform:rotate3d(x,y,z,deg) 沿着自定义轴,旋转多少度

让转换后的子元素保留 3D 转换：

属性	作用
transform-style	让转换后的子元素保留 3D 转换,默认为flat不转换,preserve-3d开启转换

古塔前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06-CSS3透视

什么是透视我们写的css2D都是平面效果,无法做到立体的效果，如果想要做立体的效果，我们就需要z轴,直接添加z轴是没有效果的,需要在元素的父级元素上添加透视效果。一个简单的透视代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
复制链接

扫一扫