从0开始学web-day15-CSDN博客

本文链接：https://blog.csdn.net/oxygen_ls/article/details/122647551

1.复习
day14复习
2.过渡属性
过渡属性 transition
作用：可以看到从一种状态到另一种状态的过程
transition放在初始状态上，鼠标悬停和离开都存在过渡，放在鼠标悬停位置上只要悬停时存在过渡
transition：时间（默认0）属性（哪个属性存在过渡默认是all）延迟执行时间运动形式，复合属性
过渡属性不支持 display ：none display：block
可以设置哪个属性先存在过渡，然后利用延迟设置另一个属性，中间用逗号隔开
3.倾斜
transform:skew(角度)
内容会跟着倾斜
一个值代表x轴skew（角度）=skewx（角度）
两个值第一个代表x第二个代表y 中间用逗号隔开
可以单独设置skewx或者skewy
4.旋转
旋转函数rotate
transform：rotate（角度）正值顺时针负值逆时针旋转内容也会跟着旋转
默认旋转基点在正中心可以通过transform-origin更改旋转基点值1代表水平值2代表垂直
可以设置方向值 left center right top center bottom
可以设置具体数值或者百分比
rotatex（角度）左右
rotatey（角度）上下
rotatez（角度）前后
rotate3d（x，y，z，角度）xyz写阿拉伯数字一般是0或者1 0是不旋转 1是旋转
5.景深
景深perspective 在多远的位置去看
值越大效果越小值大就离目标近
写给父元素直接写perspective
写给元素本身 transform：perspective（）
6.缩放
缩放 scale
内容会跟着缩放默认是从中心向两端缩放缩放不脱离正常文档流缩放是宽度高度的倍数
值比1大是放大比1小是缩小如果比0小就是翻转加缩放
可以通过transform-origin更改缩放基点
一个值代表宽度高度同时缩放的倍数
两个值中间用逗号隔开第一个值代表宽度缩放的倍数第二个值代表高度缩放的倍数
可以单独设置某一个方向
scalex宽度
scaley高度
scalez厚度
scale3d（x，y，z）缩放倍数
7.偏移
偏移 translate
在原来位置上的偏移
translate写一个值相当于写translatex
值可以设置具体的数值也可以设置百分比百分比是自身宽度高度的百分比
两个值第一个代表x第二个代表y
x 水平方向（正值向右负值向左） y 是垂直方向（正值向下负值向上） z前后（正值向前负值向后）
3d空间透视效果 transform-style：preserve-3d
可以设置3个值translate3d（x，y，z）
8.多个值
transform如果存在多个属性值中间用空格隔开
注意顺序不一样值一样，最终显示效果不一样
9.翻盖

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 200px;
            border-radius: 50%;

        }
        nav {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: url(./pic1.png) center;
            border: 20 solid rgba(22, 20, 20, 1);
            position: absolute;
            z-index: 1;
            transition: 1s;
            transform-origin: right center;
            /* 隐藏元素的背面 */
            backface-visibility: hidden;
        }
        p {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: #999;
            text-align: center;
            line-height: 200px;
            position: absolute;
        }
        div:hover nav {
            transform: rotatey(180deg);
        }
    </style>
</head>
<body>
    <div>
        <nav></nav>
        <p>111</p>
    </div>
</body>
</html>

10.立方体

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            transform: rotateX(10deg) rotateY(15deg);
            /* 3d空间透视图 */
            transform-style: preserve-3d;
            /* border: 10px solid #000; */

        }
        p {
            width: 200px;
            height: 200px;
            position: absolute;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            opacity: 0.8;
        }
        p:nth-child(1) {
            background: pink;
            transform: translatez(100px);
        }
        p:nth-child(2) {
            background: purple;
            transform: translatez(-100px);
        }
        p:nth-child(3) {
            background: yellow;
            transform: rotateY(90deg) translateZ(100px);
            
        }
        p:nth-child(4) {
            background: goldenrod;
            transform: rotateY(90deg) translateZ(-100px);
        }
        p:nth-child(5) {
            background: yellowgreen;
            transform: rotateX(90deg) translateZ(100px);
        }
        p:nth-child(6) {
            background: orchid;
            transform: rotateX(90deg) translateZ(-100px);
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
</body>
</html>