从零开始前端学习[35]:Cs3中的效果的基点变换

最新推荐文章于 2017-11-25 09:01:28 发布

^_^ 小小码nong

最新推荐文章于 2017-11-25 09:01:28 发布

阅读量547

点赞数 1

分类专栏： # 1.从零开始挑战前端文章标签：基线变换 transform origin 改变变换基点改变参考点

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78236879

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

Cs3中的效果的基点变换

基点是什么？
transform-origin变换基点属性

提示:
博主:章飞_906285288
博主:http://blog.csdn.net/qq_29924041

基点是什么？

基点可以用base pointer或者base line来说明，即基线，什么才是基线呢？？即基础参考的线

基线基点，即是参考点
默认的基点：即元素绝对的中心点
transform-origin属性提供了两个参数值，用于设置基线使用的
基线说的形象一点就定于将需要装换的元素定在一个点上，所有的动画效果都是在这个点基础上做的效果

transform-origin变换基点属性

transform-origin的属性是用来设置基点属性的

第一个值x轴，第二个值y轴并且两个值以空格个开当只有一个值的时候，并且是方向值（如top），另外一个值默认为center，如果是固定的值（30px）,那么这一个值就是x轴的值，另外一个是y轴，默认为50%；
注意：可以为负值（相当于超出盒子以外去了）

取值去下表所示:

取值类型	含义	示例
百分比	百分比指定坐标值，可以为负值，负值有可能在外面	transform-origin:50% -50%;
像素	长度指定坐标值，可以为负值	transform-origin:50px 50px;
使用位置信息left，right，center，top，bottom两两组合	组合使用法来重新定制基线	transform-origin:center center;

注意：有几个相对比较重要的基线值:

transform-origin:center;/transform-origin:center center; 基点为绝对中心点
transform-origin:left top;基点为左上角
transform-origin:right top;基点为右上角
transform-origin:bottom left;基点为左下角
transform-origin:bottom right;基点为右下角
transform-origin:50% 50%;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
      div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent}
      div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: deeppink;margin: 30px;transition: 2s}
      div p:nth-child(1){transform-origin: left top}
      div p:nth-child(1):hover{transform: rotate(-0.5turn)}
      div p:nth-child(2){transform-origin: 30px 50px}
      div p:nth-child(2):hover{transform: scale(1.5)}
      div p:nth-child(3){transform-origin: 30% 80%}
      div p:nth-child(3):hover{transform: translate(200px,-100px)}
  </style>
</head>
<body>
    <div class="main">
      <p>rotate</p>
      <p>scale</p>
      <p>translate</p>
    </div>
</body>
</html>

显示如下:

这里写图片描述

刚刚试了下，好像在rotate和scale的时候比较有效果，在translate的时候好像没有。

^_^ 小小码nong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[35]:Cs3中的效果的基点变换

Cs3中的效果的基点变换基点是什么？transform-origin变换基点属性提示: 博主:章飞_906285288 博主:http://blog.csdn.net/qq_29924041基点是什么？基点可以用base pointer或者base line来说明，即基线，什么才是基线呢？？即基础参考的线基线基点，即是参考点默认的基点：即元素绝对的中心点transform
复制链接

扫一扫

专栏目录