CSS空间转换

最新推荐文章于 2024-07-19 15:50:46 发布

Gxbfeng

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量445

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_51757999/article/details/125685080

版权

一、空间位移

语法：

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

取值：

像素单位数值

百分比（以盒子自身尺寸为参照物）

二、透视

语法：perspective: 值;（添加给父级）

取值：像素单位数值，数值一般在800 px– 1200px（表示眼睛到屏幕的距离）

作用 :空间转换时，为元素添加近大远小、近实远虚的视觉效果

三、空间旋转

语法：

transform: rotateZ(值); 表示绕z轴旋转

transform: rotateX(值); 表示绕x轴旋转

transform: rotateY(值);表示绕y轴旋转

rotate3d(x, y, z, 角度度数)；很少用

确定旋转角度为正负方法：左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

四、立体呈现

语法：transform-style: preserve-3d；给盒子父元素添加

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            position: relative;
            background-color: aqua;
            margin: 0 auto;
            transition: all 2s;
            transform-style: preserve-3d;
           
        }
        div{
            width: 300px;
            height: 300px;
        }
        .font{
            position: absolute;
            background-color: blueviolet;
            transform: translateZ(300px);
        }

    .after{
        position: absolute;
         background-color:cadetblue
          
    }

    .box1:hover{
        transform: rotateY(-360deg);
    }
    </style>
</head>
<body>
 <div class="box1">
 <div class="font"></div>
 <div class="after"></div>   

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

Gxbfeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS空间转换

一、空间位移语法：transform: translate3d(x, y, z); transform: translateX(值);transform: translateY(值); transform: translateZ(值);取值：像素单位数值百分比（以盒子自身尺寸为参照物）二、透视语法：perspective: 值;（添加给父级）取值：像素单位数值，数值一般在800 px– 1200px（表示眼睛到屏幕的距离）作用 :空间转换时，为元素添加近大远小、近实远虚的视觉效果三、空间旋转语法： t
复制链接

扫一扫