css3中的2D和3D

2D位移属性

位移属性的使用(移动元素的位置)
1.属性:transform 变形/转换
2.属性值:
- translate(x,y) 沿着X和Y轴进行移动,当只有一个属性值的时候只会沿着X轴进行移动
- translateX() 沿着X进行移动
- translateY() 沿着Y进行移动
3.拓展:位移的相关使用总结
- 盒模型、定位可以结合过渡使用
- 浮动属性不可以
- 位移不会让元素脱离文档流
- 位移可以设置负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
            transition: 0.8s;
        }
        section:hover div{
            transform: translateY(100px)
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        文本
    </section>
</body>
</html>

鼠标触摸到div盒子里时：

CSS3中的缩放属性
1.属性:transform
2.属性值:
- scale(x,y) 改变元素的宽高,当x和y的参数相同时候可以简写成一个
- scaleX() 宽度
- scaleY() 高度
3.关于属性值中的参数使用
- 小于0的时候先缩小再放大(旋转180deg)
- 等于0的时候隐藏
- 小于1的时候缩小
- 等于1的时候不变化显示
- 大于1的时候放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            position: relative;
        }
        div:nth-child(1){
            width: 80%;
            height: 5px;
            background: red;
            position: absolute;
            top: 20%;
            left: 10%;
            transform-origin: left top
        }
        div:nth-child(2){
            width: 80%;
            height: 5px;
            background: green;
            position: absolute;
            bottom: 20%;
            transform-origin: right bottom;
            left: 10%;
        }
        div:nth-child(3){
            width: 5px;
            height: 80%;
            background:yellow;
            position: absolute;
            left: 20%;
            top: 10%;
            transform-origin: left bottom
        }
        div:nth-child(4){
            width: 5px;
            height: 80%;
            background:yellowgreen;
            position: absolute;
            right: 20%;
            top: 10%;
            transform-origin: right top
        }
        div{
            transform: scale(0);
            transition: 0.8s
        }
        section:hover div{
            transform: scale(1)
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

一.旋转属性的使用
1.属性:transform
2.属性值:rotate(参数)
- rotate(一个参数) 默认为Z轴
- rotateX() 单杠运动
- rotateY() 钢管舞
3.注意旋转的观察角度
- 观察的时候永远都是站在当前这个轴的正值方向观察(正值方向看向负值方向)
- 设置正值永远都是顺时针,负值都是逆时针
4.引出景深效果(远小近大-视距) 有两种表达形式
- 在父级元素上设置 perspective:1200px
- 在子级元素上设置 transform:perspective(1200px)

二:倾斜属性的使用
1.属性:transform
2.属性值:
- skew(x,y)
- skewX()
- skewY()

3D属性

一:形成3D空间,浏览器只是多了一条Z轴可以进行操作,浏览器不会有任何的变化
1.属性:transform-style
2.属性值
- flat 默认值2D空间
- preserve-3d 形成3D空间多了Z轴

二.位移属性
1.transform:translateZ(200px)
2.transform:translate3d(10px,20px,30px)

三:缩放属性
1.transform:scaleZ(2) 默认是Z轴,单独写没有效果
2.transform:scale3d(2,3,4) 需要配合x和y使用

四:旋转属性
1.transform:rotateZ(30deg)
2.transform:rotate3d(0,0,1,30deg) 前三个参数表示xyz轴开关(1\0)
注意点:位移和旋转对于位置的影响
1.当一个元素有多个相同的变形属性值要使用的时候可以把属性值写在一起,之间用空格隔开
2.当位移和其他属性同时出现的时候,先写位移,后写其他属性值

3D属性

猜你喜欢