• 21、前端开发：CSS知识总结——transform变形属性

    1、属性定义

            Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。可以改变元素的形状或位置，不会影响到页面的布局。

    2、语法

    transform: none|transform-functions;

    值描述
    none定义不进行转换。
    matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
    translate(x,y)定义 2D 转换。
    translate3d(x,y,z)定义 3D 转换。
    translateX(x)定义转换，只是用 X 轴的值。
    translateY(y)定义转换，只是用 Y 轴的值。
    translateZ(z)定义 3D 转换，只是用 Z 轴的值。
    scale(x[,y]?)定义 2D 缩放转换。
    scale3d(x,y,z)定义 3D 缩放转换。
    scaleX(x)通过设置 X 轴的值来定义缩放转换。
    scaleY(y)通过设置 Y 轴的值来定义缩放转换。
    scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
    rotate(angle)定义 2D 旋转，在参数中规定角度。
    rotate3d(x,y,z,angle)定义 3D 旋转。
    rotateX(angle)定义沿着 X 轴的 3D 旋转。
    rotateY(angle)定义沿着 Y 轴的 3D 旋转。
    rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
    skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
    skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
    skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
    perspective(n)为 3D 转换元素定义透视视图。

    扩展：水平垂直居中（宽高位置的情况下） 

    position：absolute；

    left：50%;

    right：50%;

    transform：translateX(-50%)   translateY(-50%);

            Z轴平移，调整元素在Z轴的位置，正常情况下就是调整元素和人眼之间的距离，距离越大，元素离人越近；Z轴平移属于立体效果（近大远小），默认网页不支持透视，如果需要，必须要设置网页的视距

    1. /*网页视距的设置*/
    2.  
    3. html{
    4.         
    5.     /*设置网页视距为800px，人眼距离网页的距离*/
    6.  
    7.     perspective：800px;
    8.  
    9. }

            旋转，通过旋转可以使元素沿着x，y，z轴旋转指定的角度

            rotateX()         例：rotateX(1 turn)  沿X旋转一圈 ；

            rotateY()         例：rotateY(180deg)  沿Y旋转180°；

            rotateZ()         例：rotateZ(90deg)  沿Z旋转90°。

            backface-visibility：hidden；   //是否显示元素背面

    1. html>
    2. <html>
    3.     <head>
    4.     <meta charset="utf-8"> 
    5.     <title>DoubleYellowtitle>
    6.     <style> 
    7.         body
    8.         {
    9.         	margin:30px;
    10.         	background-color:#E9E9E9;
    11.         }
    12.  
    13.         div.polaroid
    14.         {
    15.         	width:294px;
    16.         	padding:10px 10px 20px 10px;
    17.         	border:1px solid #BFBFBF;
    18.         	background-color:white;
    19.         	/* Add box-shadow */
    20.         	box-shadow:2px 2px 3px #aaaaaa;
    21.         }
    22.  
    23.         div.rotate_left
    24.         {
    25.         	float:left;
    26.         	-ms-transform:rotate(7deg); /* IE 9 */
    27.         	-webkit-transform:rotate(7deg); /* Safari and Chrome */
    28.         	transform:rotate(7deg);
    29.         }
    30.  
    31.         div.rotate_right
    32.         {
    33.         	float:left;
    34.         	-ms-transform:rotate(-8deg); /* IE 9 */
    35.         	-webkit-transform:rotate(-8deg); /* Safari and Chrome */
    36.         	transform:rotate(-8deg);
    37.         }
    38.     style>
    39.     head>
    40.     <body>
    41.  
    42.         <div class="polaroid rotate_left">
    43.             <img src="pulpitrock.jpg" alt="" width="284" height="213">
    44.             <p class="caption">The pulpit rock in Lysefjorden, Norway.p>
    45.         div>
    46.  
    47.         <div class="polaroid rotate_right">
    48.             <img src="cinqueterre.jpg" alt="" width="284" height="213">
    49.             <p class="caption">Monterosso al Mare. One of the five villages in Cinque                 
    50.                 Terre.p>
    51.         div>
    52.  
    53.     body>
    54. html>

     

  • 相关阅读:
    【MST】 CF1108 F
    java-php-python-ssm写手管理平台计算机毕业设计
    蓝牙方案|伦茨科技最新ESL蓝牙电子价签方案
    2023版IDEA的下载、安装、配置、快捷键、模板、插件与使用
    精心整理高频js手写题请查收
    SSM+教学网站 毕业设计-附源码211611
    JAVASE总结作业----异常处理
    全网最全面最精华的设计模式讲解，从程序员转变为工程师的第一步
    php加密解密的用法（对称加密，非对称加密）
    注塑机 激光切割机 数控转塔冲 数控折弯机 数控剪板机 点胶机数据采集车间联网方案
  • 原文地址：https://blog.csdn.net/hh867308122/article/details/126570343