HTML与CSS学习 demo10

最新推荐文章于 2020-04-23 15:29:33 发布

菜鸟小铭

最新推荐文章于 2020-04-23 15:29:33 发布

阅读量2.5k

点赞数 8

分类专栏： HTML5及CSS学习文章标签： html css3 css 3d

本文链接：https://blog.csdn.net/weixin_46170034/article/details/104601947

版权

HTML与CSS学习

这篇文章主要讲了 CSS2D和3D转换动画和浏览器私有前缀
这是初学者看这个视频写下的笔记，如有错误，欢迎指正

CSS 2D转换 (transform)

CSS3新特性
实现元素位移，旋转，缩放
网页的坐标系和数学里面的不太一样 Y轴是向下的

移动 (translate)

和定位有点像
语法规范：

div {
   
    transform: translate(x,y);
    transform: translateX(n);
    transform: translateY(n);
}

2d转换的优点：不会影响其他元素的位置
实例：图片向上浮动的效果
translate移动百分比是相对于自身元素的大小 (结合定位方法的垂直居中使用translate(-50%,-50%))
对行内标签没有效果

旋转 (rotate)

语法规范：

div {
   
    tranform: rotate(10deg);
}

注意：rotate里面是度数单位是deg
顺时针正，逆时针负
默认旋转中心是元素中心点

修改旋转中心点 (transform-origin)

代码示例：

div {
   
    transform-origin: x y;
}

注意：参数x和y用空格隔开
默认旋转中心为中心点 (50%,50%)
可以使用方位名词

旋转练习

下拉三角的制作
代码样例:

感觉实际应用不会用这个，这个可以当作个练习

<style>
  div {
    
      content: relative;
      width: 150px;
      height: 35px;
      border: 1px soild #fff;
  }
  div:after {
    
      content: absolute;
      width: 10px;
      height: 10px;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      transform: rotate(45deg);
  }
</style>
<body>
  <div></div>
</body>

旋转更换文字的背景颜色显示效果：

<style>
  div {
    
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      overflow: hidden;
  }
  div::before {
    
      content: '';
      /* 一定注意伪元素是行内块元素 */
      display: block;
      width: 100%;
      height: 100%;
      background-color: skyblue;
      transform-origin: left bottom;
      transform: rotate(180deg);
      transition: all .5s;
  }
  div:hover::before {
    
      transform: rotate(0deg);
  }
</style>
<head>
  <div></div>
</head>

缩放 (scale)

语法规范：

div {
   
    transform: scale(x,y);
}

注意：其中的x和y用逗号分割
x和y用数字，1代表一倍，2代表两倍
x和y不加单位
如果只给一个参数，则宽度高度一起变
scale的优势：
- 正常修改宽高的话，高度会以顶边为基准
- scale不会影响其他盒子，且可以设置缩放的中心点
修改缩放中心点和旋转的一样 (transform-origin)

缩放实例

鼠标经过一个盒子，会出现图片被放大的情况
代码示例：

<style>
  div {
    
      float: left;
      overflow: hidden;
  }
  div img {
    
      transition: all .4;
  }
  div img:hover {
    
      transform: scale(1.1);
  }
</style>
<body>
  <div>