CSS3常见属性使用

未完待续…

transition属性

过渡

transition：all 250ms; //此元素所有样式，变化都在250ms内完成

transform属性：

scale：缩放

transform:scale(2,1); // X轴 放大两倍，Y轴 放大一倍
transform:scaleX(2); // 只放大 X轴两倍
transform:scaleX(-2); // X轴方向放大两倍，且以Y轴为中心，翻转180°
			// 与transform:rotateY(180deg)效果一致

translate：偏移

位移过程中不影响其他元素

transform:translateX(30px); // 向右移动30个像素
transform：translateY(30px); // 向上移动30个像素
transform：translateY(-30px); // 向下移动30个像素
transform：translate(30px,-100); // 向右移动30个像素，向下移动100个像素

使用 3d Z轴，父元素比如是sd空间

transform-style:preserve-3d; //创建父元素3d空间

transform: perspective(100px) translateZ(50px); // 当前元素沿3d Z轴 向前移动120px

最终呈现的元素大小与角度，景深有一个计算关系
3d Z轴小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transition: all 250ms;
            background-color: red;
            position: relative;

        }
        #content:hover{
            /*transform: rotateY(120deg);*/
        }
        #box{
            position: absolute;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: green;
            transition: all 250ms;
            transform:perspective(200px) translateZ(0px);
            cursor: pointer;
        }
        #box:hover{
            transform:perspective(200px) translateZ(50px);
        }
    </style>

</head>
<body>
    <div id="content">
        <div id="box"></div>
    </div>
</body>
</html>

鼠标悬浮到绿色方块上会有一个放大的视觉效果，其实是调节了元素与屏幕的远近距离

transition属性

过渡

transform属性：

scale：缩放

translate：偏移

猜你喜欢