45、变形

最新推荐文章于 2022-04-19 15:00:36 发布
最新推荐文章于 2022-04-19 15:00:36 发布
阅读量175 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MoonNight608/article/details/107486844
版权

文章目录

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

变形

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
    margin:0 auto;
    margin-top:100px;
 
   1、变形就是通过css来改变元素的形状或位置
      - 变形不会影响到页面的布局
      - transform 用来设置元素变形的效果(一个元素只会有一个transform生效，后面的覆盖前面的)
         - 平移：
             translateX() 沿着x轴方向平移
             translateY() 沿着y轴平移
             translateZ() 沿着z轴平移
                - 平移元素时，百分比是相对于自身计算的 
  
    transform:translateX(100px)
}
.box2{
    width:200px;
    height:200px;
    background-color:#oragne;
    margin:0 auto;
}

// 如下，使用变形进行元素居中
.box3{
    background-color:orange
    position:absolute;
    /*
      这种居中方式，只适用于元素的大小确定
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
    */
    /* 如下设置水平、垂直居中 */
    left:50%;
    top：50%；
    transform:translateX(-50%) translateY(-50%);   
}
// 如下，为设置鼠标移入，上浮效果
.box4,.box5{
    width:220px;
    height:300px;
    background-color:yellowgreen;
    float：left;
    margin:0 10px;
    transition:transform 0.3s;
}
.box4:hover{
    transform:translateY(-4px);
    box-shadow:0 0 10px rgba(0,0,0,0.3);
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>


</body>
</html>

z轴平移

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
html{
   1、设置当前网页的视距为800px 人眼距离网页的距离，z轴平移效果必须设置perspective才能看出
    perspective:800px;
}
.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
    margin:200px auto;
    
 2、z轴平移，调整元素在z轴的位置，元素和人眼之间的距离 
       距离越大，元素离人越接近
       z轴的平移属于立体的效果（近大远小）默认情况下不支持透视
       如果需要看见效果，必须设置网页的视距
    
    transition:2s；
  
}
body:hover .box1{
    transform:translateZ(100px)
}

</style>
<body>
<div class="box1"></div>

</body>
</html>

旋转

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
html{
    /* 设置当前网页的视距为800px 人眼距离网页的距离*/
    perspective:800px;
}
.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
    margin:200px auto;
   
    transition:2s；
  
}
body:hover .box1{
    transform:translateZ(100px)

     1、通过旋转，可以使元素沿着x  y 或者 z 旋转指定的角度
         rotateZ()
           - 度数  turn
         rotateX()
         rotateY()
         
  
    transform:rotateZ(45deg);
    transform:rotateX(90deg)；
    
    transform :rotateY(180deg) translateZ(400PX);
    
  2、设置是否显示元素背面
          visible 显示
          hidden 隐藏
    
    backface-visibility:visible
}

</style>
<body>
<div class="box1"></div>

</body>
</html>

钟表练习

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
*{
    margin:0;
    padding:0
}
.sec-wrapper{
    width:500px;
    height:500px;
    animation:run 60s;
}
.sec{
    height:300px;
    width:4px;
    color:red;
    margin:0 auto;
}
@keyframs run{
    from{
        transform:rotateZ(0);
    }
    to{
        transform:rotateZ(360deg);
    }
}

</style>
<body>
<div class="sec-wrapper">
   <div class="sec"></div>
</div>
</body>
</html>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
*{
    margin:0;
    padding:0
}
// 设置表的样式
.clock{
    width:500px;
    height:500px;
    margin:0 auto;
    margin-top:100px;
    border-radius:50%;
    border:1px solid black
    //animation:run 60s;
    position:relative;
}
.clock > div{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto
}
/* 设置时针 */
.hour-wrapper{
    height:60%;
    width:60%;
    animation:run 7200s linear infinite;
}
.hour{
    height:50%;
    width:6px;
    background-color:#0000;
    margin:0 auto;
}
.min-wrapper{
    hegiht:80%;
    width:80%;
    animation:run 600s steps(60) infinite;
    
}
.min{
    height:50%;
    width:6px;
    background-color:#0000;
    margin:0 auto;
    animation:run 60s steps(60) infinite;
}
.sec-wrapper{
    hegiht:95%;
    width:95%;
    animation:run 60s steps(60);
}
.sec{
    height:50%;
    width:2px;
    background-color:#0000;
    margin:0 auto;
}

/*旋转容器*/
@keyframs run{
    from{
        transform:rotateZ(0);
    }
    to{
        transform:rotateZ(360deg);
    }
}

</style>
<body>
<div class="clock">
   /* 创建时针*/
   <div class="hour-wrapper">
      <div class="hour"></div>
   </div>
     /* 创建分针*/
   <div class="min-wrapper">
      <div class="min"></div>
   </div>
     /* 创建秒针*/
   <div class="sec-wrapper">
      <div class="sec"></div>
   </div>
</div>


</body>
</html>

立体图片容器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
*{
    margin:0;
    padding:0
}
html{
    perspective:800px;
}
// 设置表的样式
.cube{
    width:200px;
    height:200px;
    margin:100px auto;
    /*设置3d变形的效果*/
    transform-style:preserve-3d
    transform:rotateX(45deg) rotateZ(45deg);
    animation:rotate 20s;
}
.cube>div{
    width:200px;
    height:200px;
    /* 为元素设置透明效果 */
    opacity:0.5;
    position:absolute
}
img{
    vertical-align:top;
}
.box1{
    transform:rotateY(90deg) translateZ(100px);
}
.box2{
    transform:rotataY(-90deg) translate(100px);
}
.box3{
    transform:rotateX(90deg) translateZ(100px);
}
.box4{
    transform:rotateX(-90deg) translateZ(100px)
}
.box5{
    transform:translateZ(100px);
}
.box6{
    transform:rotateY(180deg) translateZ(100px);
}
@keyframes rotate{
    from{
        transform:rotateX(0) rotateZ(0)
    }
    to{
        transform:rotateX(0) rotateZ(0)
    }
}
</style>
<body>
<div class="cube">
   // 引入图片
   <div class="box1">
      <img src="./img/14/1.jpg">
   </div>
    <div class="box2">
      <img src="./img/14/1.jpg">
   </div>
    <div class="box3">
      <img src="./img/14/1.jpg">
   </div>
    <div class="box4">
      <img src="./img/14/1.jpg">
   </div>
     <div class="box5">
      <img src="./img/14/1.jpg">
   </div>
     <div class="box6">
      <img src="./img/14/1.jpg">
   </div>
</div>


</body>
</html>

缩放

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
。box1{
    width:100px;
    height:100px;
    background-color:#bfa;
    transition:2s;
}
.box1:hover{
 
  1、对元素进行缩放的函数
       scaleX() 水平方向的缩放
       scaleY() 垂直方向的缩放
       scale() 双方向的缩放
   
  
  2、变形的原点：
          默认值 center
      transform-origin: 0 0
 
 transform:scale(2)
}

// 如下，设置图片放大
.img-wrapper{
    width:200px;
    height:200px;
    border:1px red solid;
    overflow:hidden
}
img{
    transition:0.2s
}
img-wrapper:hover img{
    transform:scale(1.2)
}

</style>
<body>
<div class="box1"></div>
<div class="img-wrapper">
   <img src=""/>
</div>

</body>
</html>
五仁卤鸡翅
关注
专栏目录
css中变形,css3中变形处理
weixin_39611413的博客
08-04 1142
transfrom功能在css3 中可以使用transfrom功能实现文字或图像的旋转，缩放，倾斜，移动等变形处理deg是css3中使用的一种角度单位。旋转： 使用rotate方法，在参数中加入角度值，在角度值后要加上角度单位deg。旋转方向为顺时针。例rotate(45deg)缩放： 使用scale方法，在参数中指定缩放的倍率，0.5表示缩小一半。scale(水平缩放倍率，垂直缩放倍率)，可以同...
变形
02-15
变形
HTML变形
qq_43256819的博客
08-31 546
旋转变形 将transform属性的值设置为rotate()，即可实现旋转变形 transform: rotate(45deg); 若角度为正，则顺时针方向旋转，否则逆时针方向旋转 可以使用transform-origin属性设置自己的自定义变换原点 缩放变形 将transform属性的值设置为scale()，即可实现缩放变形 transform: scale(3); 当数值小于1时，表示缩小元素；大于1表示放大元素 斜切变形 将transform属性的值设置为skew()，即可实现斜切变形 tr
html3d变形,深入理解CSS变形transform(3d) - 小火柴的蓝色理想
weixin_28689507的博客
06-18 544
前面的话本文将详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility坐标轴在了解透视之前，首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐...
06_塑性变形
FLMore的博客
10-06 3444
文章目录宏观规律单晶体塑性变形多晶体塑性变形合金塑性变形塑性变形引起的变化 宏观规律 工程应力应变曲线 概念 弹性变形：卸载后可恢复；塑性变形 应力： σ=PF0\sigma =\dfrac{P}{F_0}σ=F0​P​ ；应变： ϵ=l−l0l0\epsilon =\dfrac{l-l_0}{l_0}ϵ=l0​l−l0​​ 应力应变曲线 强度 弹性极限 屈服极限 条件屈...
C语言可变形参
weixin_44453694的博客
04-19 593
C语言可变形参
DM45钻机履带架扭曲变形故障分析
07-12
对DM45钻机履带架发生扭曲变形而引发的"四轮一带"相关故障进行了详细描述和原因分析,同时针对扭曲变形的校正纠偏给出了详细的工艺方案,并对校正纠偏前后取得的效果进行了详细的对比分析,为矿用设备"四轮一带"的检修...
bp.zip_BP神经网络_BP预测_fast45w_变形预测_时间序列
07-14
采用bp算法对高边坡变形时间序列进行预测
OpenGL.rar_openGL缩放_opengl 变形_opengl 旋转_opengl变形_变形
09-22
例如，`glRotatef(45.0, 0.0, 1.0, 0.0)`将使物体沿Y轴旋转45度。旋转轴的单位是笛卡尔坐标系，(0, 1, 0)表示Y轴，(1, 0, 0)表示X轴，(0, 0, 1)表示Z轴。 OpenGL的变形（或称变换）则更为复杂，它包括平移、旋转、...
基于驱动器位置相位校正的变形镜控制算法
02-08
利用该算法建立神光II升级激光装置45驱动单元变形镜控制的计算模型，对第2～36项泽尼克(Zernike)多项式像差[峰谷(PV)值为2 μm]逐项进行拟合的结果显示，收敛步数在9次以内驱动器位置相位控制精度即可达到0.01 μm。...
20、网易新闻列表
MoonNight608的博客
06-23 2393
仿写网易新闻列表
1、文档声明、进制、文档使用
MoonNight608的博客
06-16 1756
文章目录介绍文档声明headmetatitle 介绍 文档声明 head head是网页的头部，head中的内容不会再网页中直接出现，主要用来帮助浏览器或搜索引擎解析网页 meta meta标签用来设置网页的元数据，这里的meta用来设置网页的字符集，避免乱码问题 title title中内容会显示再浏览器的标题栏，搜素引擎会主要根据title中的内容来判断网页的内容 <html lang="en"> <!-- head是网页的头部，head中的内容不会再网页中直接出现，主要 用来帮助浏览
34、文本的水平和垂直对齐
MoonNight608的博客
06-27 753
1、text-align 2、vertical-align 3、text-decoration 4、如何将多余文字设置为省略号
带你从头学会CSS（CSS学习笔记）
MoonNight608的博客
06-17 735
文章目录介绍目录 介绍 本文是在学习CSS时做的学习笔记，内容很详细，会一直更新~~ 目录 1、文档声明、进制、文档使用 2、实体 3、meta
11、像素和百分比
MoonNight608的博客
06-19 642
文章目录介绍像素和百分比 介绍 本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记 像素和百分比 <html lang="en"> <head> <meta charset="UTF-8"> <title>meta</title> </head> <style> .box1{ width:200px; height:200px; background-color:oran
6、超链接、相对路径
MoonNight608的博客
06-18 455
文章目录介绍超链接超链接其它用法相对路径 介绍 本文是在学习CSS时做的学习笔记，笔记所有内容在 CSS学习笔记 超链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>meta</title> </head> <script> </script> <body> 1、超链接可以让我
49、淘宝网练习
MoonNight608的博客
07-21 403
文章目录介绍淘宝网练习 介绍 文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记 淘宝网练习 <html lang="en"> <head> <meta charset="UTF-8"> <title>meta</title> </head> <style> *{ marging:0; padding:0 } /* 设置外层容器 */ .nav{ width:100%
19、京东左侧导航条样式表
MoonNight608的博客
06-22 393
仿写京东导航条
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值