3d变换(Css)(笔记)

最新推荐文章于 2024-07-25 10:18:55 发布

the ^O^ pet

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量125

点赞数

分类专栏：前端笔记文章标签： css css3

本文链接：https://blog.csdn.net/qq_45076209/article/details/112979554

版权

前端笔记专栏收录该内容

4 篇文章 1 订阅

订阅专栏

3d变换(Css)

变换基点

transform:rotate(45deg)     /*中心旋转45度*/

transform-origin：

	top center left right bottom

	百分比

百分比时，第一个值为从左到右，第二个值为从上到下

例：
	transform-origin: 100% 50%
	表示的位置是一个盒子的最右边的中点

若只给一个值，另一个默认为中心点

在这里插入图片描述

3d知识点

创造一个3d物体或展示一个物体在三维空间运动，基础条件就是创建一个3维坐标系

浏览器中看到的3d效果-----属性

/*变为3d效果*/
transform-style:preserve-3d

/*变为景深属性*/
perspective:800px

/*移动z轴*/
transform:translateZ(100px);

了解了这个之后就可以做一个正方形了

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            margin: 200px auto 0;
            width: 200px;
            font-size: 20px;
            font-weight: bold;
            transition: 5s;
            transform-style: preserve-3d;
            /* perspective: 800px; */
        }

        .face {
            position: absolute;
            top: 0;
            text-align: center;
            line-height: 200px;
            width: 200px;
            height: 200px;
            /* box-shadow: 2px 2px 5px red inset; */
            /* background-color: pink; */

        }

        .box:hover {
            transform: rotateX(720deg) rotateY(360deg);
        }

        .qian {
            transform: translateZ(100px);
            background-color: red
        }

        .hou {
            transform: rotateY(180deg) translateZ(100px);
            background-color: rosybrown;
        }

        .left {
            transform: rotateY(-90deg) translateZ(100px);
            background-color: pink;
        }

        .right {
            transform: rotateY(90deg) translateZ(100px);
            background-color: orange;
        }

        .top {
            transform: rotateX(90deg) translateZ(100px);
            background-color: lavenderblush;
        }

        .bottom {
            transform: rotateX(-90deg) translateZ(100px);
            background-color: mediumturquoise;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="face qian">前</div>
        <div class="face hou">后</div>
        <div class="face left">左</div>
        <div class="face right">右</div>
        <div class="face top">上</div>
        <div class="face bottom">下</div>
    </div>
</body>

</html>

在这里插入图片描述

less知识点

在less中写css样式可以将子元素直接嵌套在父元素中，它会将less编译为css样式，之后再html中引用编译出的css样式即可

@ 变量定义一个变量，可以直接引用
& 表示自己本身，可以&:hover使用

@charset "utf-8";
@bgc: red;

div{
    width:100px;
    height:100px;
    /*子元素可以直接写在这里，解构更清晰*/
    ul{
        background-color:@bgc;   //为红色
    }
    &:hover{
        transform: rotate(45deg);  //鼠标移动到div触发
    }
}

the ^O^ pet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3d变换(Css)(笔记)

3d变换(Css)变换基点transform:rotate(45deg) /*中心旋转45度*/transform-origin： top center left right bottom 百分比百分比时，第一个值为从左到右，第二个值为从上到下例： transform-origin: 100% 50% 表示的位置是一个盒子的最右边的中点若只给一个值，另一个默认为中心点3d知识点创造一个3d物体或展示一个物体在三维空间运动，基础条件就是创建一个3维坐标
复制链接

扫一扫