css变形十

最新推荐文章于 2024-06-13 21:20:19 发布
最新推荐文章于 2024-06-13 21:20:19 发布
阅读量45 收藏
点赞数
分类专栏： HTML+css 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50563868/article/details/123523867
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>变形</title>
  <style>
    body {
      border: 1px solid #f00;
      perspective: 800px;
    }
    .box1 {
      width: 100px;
      height: 100px;
      background-color: #bfc;
      margin: 0 auto;
      margin-top: 50px;
    }
    .box1:hover {
      transform: translateY(-5px);
      box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: #a10;
      margin: 0 auto;
      transition: 2s;
    }
    body:hover .box2 {
      /* transform: translateZ(10px); */
      transform: rotateY(180deg) translateZ(100px);
    }
    .box3 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%);
      background-color: #aa8;
    }
    .box4 {
      width: 100px;
      height: 100px;
      background-color: #a19;
      margin: 100px auto;
      transition: 2s;
      overflow: hidden;
    }
    .box4:hover {
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <span class="box3">abcvv</span>
  <div class="box4"></div>
</body>
</html>

变形：

通过css来改变元素的形状或者位置，不会影响到页面布局；transform设置元素变形效果；

  • 平移：translatex,y,z();百分比是相对于自身来说的；
  • z轴平移：调整元素和人眼之间的距离

，是立体效果，近大远小，但网页不支持透视，要设置网页的视距perspective，一般600-1200px左右；

旋转：

指定角度；transform来设置；

  • rotatex,y,z(0-360deg),1turn表示一圈；
  • backface-visibility：visible默认显示，hidden隐藏；背面是否显示；
  • 旋转时的中心
  • opacity:0-1;元素透明；
  • transform-style：preserve-3d；设置3d效果；

缩放：

transform进行设置，对元素进行缩放

  • scalex,y()；
  • transform-origin：偏移量 偏移量；改变变形的原先（转轴中心点）；
米白蓝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中变形,css3中变形处理
weixin_39611413的博客
08-04 1070
transfrom功能在css3 中可以使用transfrom功能实现文字或图像的旋转，缩放，倾斜，移动等变形处理deg是css3中使用的一种角度单位。旋转： 使用rotate方法，在参数中加入角度值，在角度值后要加上角度单位deg。旋转方向为顺时针。例rotate(45deg)缩放： 使用scale方法，在参数中指定缩放的倍率，0.5表示缩小一半。scale(水平缩放倍率，垂直缩放倍率)，可以同...
CSS3的变形
karry_yuan的博客
04-07 1646
inline-block和float的区别 及 CSS3变形
CSS变形
JerryQuery的博客
12-30 2259
变形介绍： CSS提供的形变功能不仅可以平移元素，还能做很多其他的事情，比如旋转、缩放、翻转等，让页面的动画与交互看起来更加自然。 坐标系： x轴的正值在右侧，负值在左侧。y轴的正值沿纵轴向下，负值沿纵轴向上。z轴上的正值离你较近，负值离你较远 易混淆的三个属性： transform变形（用于元素进行旋转、缩放、移动） translate移动 transition过渡（设置元素的样式过度） transform 变形 语法：transform: non...
CSS变形 transform 的所有属性详解
大剑师兰特的GIS世界
04-29 1076
CSS变形（Transform）属性允许您对元素进行复杂的2D或3D变换，包括旋转、缩放、移动（平移）、倾斜和矩阵变换。这些变换不会影响文档流，而是改变元素的外观。
css3变形属性
ssjjrr的博客
10-01 659
css3形变属性
CSS变形transform
橘猫吃不胖的博客
11-07 1210
CSS变形1 认识transform2 2D转换2.1 transform用法2.2 变形函数transform-function2.2.1 matrix()定义矩形变换2.2.2 translate()移动元素对象2.2.3 scale()缩放元素对象2.2.4 rotate()旋转元素对象2.2.5 skew()倾斜元素对象2.3 transform-origin中心点3 3D转换3.1 rotateX()指定元素围绕X轴旋转3.2 rotateY()指定元素围绕Y轴旋转 1 认识transform 2
使用 CSS 变形笔记
m0_55870194的博客
03-23 106
CSS transforms 通过一系列 CSS 属性实现，通过使用这些属性，可以对 HTML 元素进行线性仿射变形（affine linear transformations）。可以进行的变形包括旋转，倾斜，缩放以及位移，这些变形同时适用于平面与三维空间。 只有使用盒模型（Box Model）来定位的元素可以被变换（transformed）。，拥有 display: block 的元素是由盒模型定位的。 CSS transforms 属性 有两个主要的属性被用来定义 CSS transforms：tra
css变形
weixin_46260394的博客
04-05 111
css变形 最近又把之前的上学的东西看一下 之前也没有怎么仔细看 这里也是自己在学习和分享一下吧 变形（transform）不影响其它盒子大小 有简写方式：transform：旋转rotate（) 缩放scale() 倾斜skew() 旋转rotate：正负值都可以 默认值rotate 写法： transform：rotate（旋转角度）； 取值： ​ rotate（旋转角度） 默认值 z轴 ​ rotateZ（旋转角度）z轴 ​ rotateX（旋转角度）x轴 ​
CSS3变形详解
m0_61031325的博客
03-16 609
CSS3变形指的是利用transform属性对元素进行旋转、扭曲、缩放、位移、矩阵、原点等类型的变形处理；元素的变形操作需要配合使用rotate()、skew()、scale()、translate()、matrix()等函数来实现。在CSS3中，可以利用transform功能来实现文字或图像的旋转、扭曲、缩放、位移、矩阵这五种类型的变形处理。 其中CSS3中transform属性主要包括五种函数：旋转(rotate)、扭曲(skew)、缩放 (scale)、位移(translate)和矩阵(matrix
CSS3变形
X15077864696的博客
04-07 141
CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果，每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。 2D位移 translate(tx,ty); tx：X轴（横坐标）移动的向量长度。 ty：Y轴（横坐标）移动的向量长度。 width: 100px; height: 100px; background:red; transform: translate(100px,20px); 1. x轴向右移动100px y轴向下移动20px。
CSS变形金刚蜘蛛侠LOGO特效代码
03-20
CSS变形金刚蜘蛛侠LOGO代码基于angular.min.js制作，支持放大缩小，拖动旋转，拖动透明度，拖动左右移，拖动上下移等功能。
可调节CSS3变形金刚特效
06-24
可调节CSS3变形金刚特效是一款可以放大缩小，可以旋转，可以调节透明度，可以调节像素等等。
CSS变形弹窗效果
02-04
弹出窗体是网页常用的一个交互设计，在这个注重交互动画体验的时代，网页弹窗也可以来点新鲜的点子，比如今天分享的CSS 变形Modal Window。
yibuyisheng#blogs#CSS 变形1
07-25
3D 常用变形函数： translate3d() 、 translate() 、 scale3d() 、 scaleZ() 、 rotate3d() 、 rot
Css3制作变形与动画效果
09-03
主要介绍了Css3制作变形与动画效果，css3制作动画主要用到：变形(transform)，过渡(transition)和动画(animation)三个属性,需要的朋友可以参考下
(css)el-tabs滚动按钮浮动问题
nyf_unknow的博客
06-11 246
思路：找到相应元素，降低层级。
css预处理是什么？作用是什么？
tianxianghuiwei的博客
06-13 430
预处理器如Sass（SCSS）、Less和Stylus等，通过引入这些特性，使得开发者能够更高效地管理和组织大型的样式表，同时提升了代码的重用性和可读性。它们的引入使得开发者可以以更简洁、更高效的方式编写CSS，同时能够利用现代开发技术提升代码的重用性和可读性，是现代前端开发中常用的工具之一。：允许定义变量来存储颜色、字体大小、间距等，可以在整个样式表中统一管理和调整，提高了代码的灵活性和可维护性。：通过以上特性，开发者能够更高效地组织和管理大型项目的样式代码，提升了可读性和可维护性。
什么是CSS的:target选择器
最新发布
ggq53219的博客
06-13 245
选择器只影响URL中当前的目标元素。如果用户刷新页面或者导航到另一个页面，然后再回来，之前的选中状态将不会保留，除非使用JavaScript或其他技术来保持状态。选择器用于选择当前活动的目标元素。当页面上的一个链接被点击，并且该链接指向一个页面内的元素（通过ID）时，被链接的元素就会成为目标元素，此时。这种选择器常常与页面内的导航（如Tab导航、折叠面板等）和“返回顶部”功能一起使用。下面是一个简单的例子，展示了如何使用。的元素）就会被选中，并且。，从而显示该元素的内容。在这个例子中，所有的。
HTML-CSS练习例子
pacong的博客
06-09 1144
HTML CSS 练习 https://icodethis.com 作为前端练习生。不敲代码只看，入门是很慢的，所以直接实战是学习前端最快的途径之一。 这个网站练习HTML CSS的，可以打开了解一下，可以每天打卡，例子简单，循序渐进，设计的也比较好看。 下面是练习，当然布局的方法有很多，下面是一种。 01基础 这是第一个练习，但是很多大佬做出了，很多不一样的效果 比如： 设计稿 代码 <!DOCTYPE html> <html lang="en"> <head&
css背景图片不压缩变形
05-22
如果您的背景图片在CSS中被拉伸或变形，可能是因为您使用了错误的CSS属性或值。以下是一些可能导致此问题的原因和解决方法： 1. 使用错误的background-size属性值：在CSS中，background-size属性确定背景图像的大小。如果您将其设置为“cover”或“contain”，则图像将被拉伸或缩小以适应元素的大小。如果您希望图像保持其原始比例，则可以将其设置为“auto”。 2. 图像尺寸不匹配：如果您的图像尺寸与元素大小不匹配，则图像可能会被拉伸或缩小以适应元素大小。确保您的图像具有与元素相同的尺寸或更大的尺寸，并使用“background-size: cover”或“background-size: contain”以适应元素大小。 3. 像素密度问题：如果您的图像具有高像素密度（如Retina显示屏），则可能需要使用CSS媒体查询来针对不同的像素密度提供不同的图像。否则，图像可能会被缩小以适应元素大小，导致图像变形。 4. 图像文件质量问题：如果您的图像文件质量较低，则可能会导致图像变形。尝试使用高质量的图像文件，并使用压缩工具（如JPEGmini或TinyPNG）来减小文件大小。 希望这些解决方案可以帮助您解决背景图片变形的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值