【CSS 学习】transform 属性详解

最新推荐文章于 2024-08-26 07:28:57 发布

置顶

hvkcoder

最新推荐文章于 2024-08-26 07:28:57 发布

阅读量2.1k

点赞数 2

分类专栏：【HTML + CSS】文章标签： css3 transform 3d方块

本文链接：https://blog.csdn.net/hvkcoder/article/details/78470165

版权

本文详细介绍了CSS3的transform属性，包括translate、scale、rotate、skew等变形方法，以及3D效果的认知，如perspective属性的应用和transform-origin如何改变元素原点。通过实例展示了如何使用transform实现3D立方体的预览。

摘要由CSDN通过智能技术生成

transform 属性的值

translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z) 定义位置的移动距离
scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,yz) 定义元素的缩放比例
rotate(angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d(x,y,z,angle) 定义元素的旋转度
skew(x-angle,y-angle)、skewX(angle)、skewY(angle) 定义元素的倾斜度

3D效果认知

3D认知图片

perspective 属性

该属性用于激活一个3D空间，其子元素都会获得透明效果，一般 perspective 属性用于父元素。

取值为 none 或不设置，则为不激活3D空间
取值越小，3D效果越明显，建议取值为元素的宽度

transform-origin 属性

用来改变元素原点的位置，取值：

center 默认值等价于（ center center / 50% 50%）
top/right/bottom/left
transform-origin : x y z

使用 transform 实现 3D 立方体预览

<!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>transform 实现 3D 立方体</title>
    <style>
        *{ margin: 0 auto; padding: 0; }
        html{
            cursor: pointer;
            background: #3023ae;
            background: -moz-linear-gradient(-45deg, #3023ae 0%, #c86dd7 100%);
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3023ae), color-stop(100%,#c86dd7));
            background: -webkit-linear-gradient(-45deg, #3023ae 0%,#c86dd7 100%);
            background: -o-linear-gradient(-45deg, #3023