无涯教程-CSS3 - 3D转换属性

无涯教程
82 阅读2分钟

使用3d变换，无涯教程可以将元素移动到x轴，y轴和z轴。下面的示例清楚地指定了元素将如何旋转。

以下方法用于调用3D变换-

Sr.No. Value & Remark
1

matrix3d(n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n)

用于通过使用矩阵的16个值来变换元素
2

translate3d(x，y，z)

用于通过使用x轴，y轴和z轴来变换元素
3

translateX(x)

用于使用x轴变换元素
4

translateY(y)

用于使用y轴变换元素
5

translateZ(z)

用于使用y轴变换元素
6

scaleX(x)

用于通过使用x轴缩放变换元素
7

scaleY(y)

用于通过使用y轴缩放变换元素
8

scaleY(y)

用于通过使用z轴变换元素
9

rotateX(Angular)

用于通过使用x轴旋转变换元素
10

rotateY(Angular)

用于旋转以使用y轴变换元素
11

rotateZ(Angular)

用于通过使用z轴旋转变换元素

X轴3D变换示例

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            -webkit-transform: rotateX(150deg); 

        </span><span class="com">/* Safari */</span><span class="pln">
        transform</span><span class="pun">:</span><span class="pln"> rotateX</span><span class="pun">(</span><span class="lit">150deg</span><span class="pun">);</span><span class="pln"> 
        
        </span><span class="com">/* Standard syntax */</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">



</head>


<body>


  </span><span class="tag">&lt;div&gt;</span><span class="pln">
     Tutorials point
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  
  </span><span class="tag">&lt;p&gt;</span><span class="pln">Rotate X-axis</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myDiv"</span><span class="tag">&gt;</span><span class="pln">
     Learnfk point.
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  



</body>
</html>

它将产生以下输出-

Y轴3D变换示例

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#yDiv {
            -webkit-transform: rotateY(150deg); 

        </span><span class="com">/* Safari */</span><span class="pln">
        transform</span><span class="pun">:</span><span class="pln"> rotateY</span><span class="pun">(</span><span class="lit">150deg</span><span class="pun">);</span><span class="pln"> 
        
        </span><span class="com">/* Standard syntax */</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">



</head>


<body>


  </span><span class="tag">&lt;div&gt;</span><span class="pln">
     tutorials point
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  
  </span><span class="tag">&lt;p&gt;</span><span class="pln">Rotate Y axis</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"yDiv"</span><span class="tag">&gt;</span><span class="pln">
     Learnfk point.
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  



</body>
</html>

它将产生以下输出-

Z轴3D变换示例

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg); 

        </span><span class="com">/* Safari */</span><span class="pln">
        transform</span><span class="pun">:</span><span class="pln"> rotateZ</span><span class="pun">(</span><span class="lit">90deg</span><span class="pun">);</span><span class="pln"> 
        
        </span><span class="com">/* Standard syntax */</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">



</head>


<body>
<div>
learnfk.com
</div>


  </span><span class="tag">&lt;p&gt;</span><span class="pln">rotate Z axis</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"zDiv"</span><span class="tag">&gt;</span><span class="pln">
     tutorials point.
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">



</body>
</html>

它将产生以下输出-

参考链接

www.learnfk.com/css/css3-3d…

avatar
文章
阅读
粉丝