2D与3D

i.旋转变形--rotate(ndeg):

transform:rotate(ndeg);         n=-360deg~~360deg

 

 

 示例，

* {
            padding: 0;
            margin: 0;
        }
        
        .box {
            margin: 100px auto;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-color: #f40;
            line-height: 100px;
            transform-origin: 0 0;
            transform: rotate(45deg);
        }
        
        .box p {
            text-align: center;
            font-size: 50px;
            font-weight: 900;
            transform: rotate(-225deg);
        }

<div class="box">
  <p>福</p>
</div>

 

 

ii.缩放变形--scale(n):

transform:scale(n);

 注意：如果只带一个参数，表示X和Y都缩放一样的倍数

示例，

.box {
       margin: 100px auto;
       width: 100px;
       height: 100px;
       border: 1px solid #ccc;
       background-color: #f40;
     }
        
.box:hover {
        /* transform: rotateY(45deg) scale(1.2);
           transform: rotateX(45deg) scale(1.2); */
       transform: rotate(45deg) scale(1.2);
    }

<div class="box"></div>

 

 

 

iii.斜切变形--skew()：

 注意：如果只带一个参数，表示X轴

 

示例，

 .box {
        margin: 100px auto;
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        background-color: #f40;
        }
        
.box:hover {
    transform: rotate(45deg) scale(1.2) skew(20deg);
  }

<div class="box"></div>

 

 

 

iv.位移变形--translate()：

 注意：如果只带一个参数则表示X和Y都一样

 

v.调整元素的基点--origin：

transform-origin: x-axis y-axis z-axis;

属性值：

x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%。

y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%。

z-axis ：定义视图被置于 Z 轴的何处。可能的值：length

示例，

.box {
            margin: 100px auto;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-color: #f40;
        }
        
        .box:hover {
            transform: translate(10px) rotate(45deg) scale(1.2) skew(20deg);
            /* 以左上角为旋转点 */
            transform-origin: left top;
        }

<div class="box"></div>

 

 

 

vi.透视效果--perspective：

perspective:length|none;

主流浏览器都不支持，谷歌要加-webkit-，或在长度后加单位

 

vii.3D效果--transform-style：

在3D空间中呈现被嵌套的元素(必须与 transform 属性一同使用)

transform-style: flat|preserve-3d;

示例，

.box {
            margin: 100px auto;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-color: #f40;
            transform: rotateY(60deg);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: perspective-3d;
            -ms-transform-style: perspective-3d;
            transform-style: preserve-3d;
        }

<div class="box"></div>

 

 

viii.3D旋转：

 

 

 示例，

 

* {
    padding: 0;
    margin: 0;
  }
        
p {
     width: 100px;
     height: 100px;
     border: 1px solid #000;
     background-color: #f40;
   }
        
.box {
       margin: 100px auto;
       width: 102px;
       height: 102px;
       border: 1px solid #000;
       /* 透视强度 */
       perspective: 50px;
   }
        
.box p {
         transform: rotateX(30deg);
     }

<div class="box">
     <p></p>
</div>

 

 

viiii.空间移动：

 

 

 示例，

* {
            margin: 0;
            padding: 0;
        }
        
        p {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-color: orange;
        }
        
        .box1 {
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            margin: 50px auto;
            perspective: 300px;
        }
        
        .box1 p {
            transform: rotateX(30deg) translateX(100px) translateY(100px) translateZ(100px);
        }

<div class="box1">
   <p></p>
</div>

 

 

综合案例：

 * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            perspective: 300px;
            position: relative;
        }
        
        .box p {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        
        .box p:nth-child(1) {
            background-color: rgba(219, 56, 211, 0.486);
            /* 前面 */
            transform: translateZ(100px);
        }
        
        .box p:nth-child(2) {
            background-color: rgba(42, 128, 199, 0.486);
            /* 顶面 */
            transform: rotateX(90deg) translateZ(100px);
        }
        
        .box p:nth-child(3) {
            background-color: rgba(56, 219, 83, 0.486);
            /* 背面 */
            transform: rotateX(180deg) translateZ(100px);
        }
        
        .box p:nth-child(4) {
            background-color: rgba(213, 216, 32, 0.486);
            /* 底面 */
            transform: rotateX(-90deg) translateZ(100px);
        }
        
        .box p:nth-child(5) {
            background-color: rgba(236, 82, 102, 0.486);
            /* 侧面 */
            transform: rotateY(90deg) translateZ(100px);
        }
        
        .box p:nth-child(6) {
            background-color: rgba(119, 17, 236, 0.486);
            /* 侧面 */
            transform: rotateY(-90deg) translateZ(100px);
        }

<div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
</div>