#HTML5-CSS-transition-变形特效1

最新推荐文章于 2024-06-25 01:00:00 发布

置顶

微信-支付宝

最新推荐文章于 2024-06-25 01:00:00 发布

阅读量555

点赞数

分类专栏： CSS 文章标签： HTML5-CSS-transition-变形特效1 图形旋转图形翻转图形倾斜 transitioin

本文链接：https://blog.csdn.net/weixin_43097301/article/details/82971094

版权

变形特效1

概述
在CSS中执行变形转换的属性是CSS3属性中的 transform，能够执行“位移”、“旋转”、“缩放”、“倾斜”、“翻转”和“透视”等变形转换的设置，可以让Web页面的表现更加的“活跃”，增加页面的交互感，给用户留下更深的“印象”。但在用该属性进行设置时，特别是用于生产环境中时，一定要控制一个“度”，也就是说要避免“过度设计”，否则反而会让“印象”这一词有了贬义的意思。

transform
1、translate
该属性值可以让元素从当前位置根据“ left（X轴）”参数和“ top（Y轴）”参数的设置在水平和垂直方向进行移动。它和用于布局的“ position ”属性，特别是当它的“ position ”的值为“ relative”时十分相似，在进行移动后，自身的位置仍然保留，也不会影响到其它元素的位置，但有存在着区别：

“translate”可以作用于已经执行了“绝对定位（position：absolute）”的元素，而要用“position”已经设置为了“绝对定位”的元素使用“相对定位（position：relative）”需要对布局进行重新计算，或修改DOM的标签嵌套方式。
使用“translate”可以让 GPU 参与运算，动画的 FPS 更高。
使用“translate”可以让动画的像素精确到浮点数，而使用“position”属性的值最小执行动画的单位是1像素。
所以说，“position”属性是为布局而生，而“Transform”的“translate”是为动画而生。

该属性值有三种类型：

translateX( x )：设置元素在X轴方向的偏移
translateY( y )：设置元素在Y轴方向的偏移
translateZ( z )：设置元素在Z轴方向的偏移
translate( x, y )：同时设置元素在X轴和Y轴方向的偏移

<div class="wrap">
    <section class="box red-box">translateX</section>
    <section class="box green-box">translateY</section>
    <section class="box blue-box">translate</section>
</div>

.wrap {
   
    text-align: center;
}
.wrap > .box {
   
    width:  150px;
    height: 150px;
    margin: 75px;
    display: inline-block;

    cursor: pointer;

    text-align: center;
    line-height: 150px;
    letter-spacing: 2px;
    font-size: 20px;
    color: #fff;

    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -ms-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear;
}
.wrap > .red-box {
   
    background-color: red;
}
.wrap > .red-box:hover {
   
    -webkit-transform: translateX(150px);
    -moz-transform: translateX(150px);
    -ms-transform: translateX(150px);
    -o-transform: translateX(150px);
    transform: translateX(150px);
}

.wrap > .green-box {
   
    background-color: green;
}
.wrap > .green-box:hover {
   
    -webkit-transform: translateY(150px);
    -moz-transform: translateY(150px);
    -ms-transform: translateY(150px);
    -o-transform: translateY(150px);
    transform: translateY(150px);
}

.wrap > .blue-box {
   
    background-color: blue;
}
.wrap > .blue-box:hover {
   
    -webkit-transform: translate(-150px, 150px);
    -moz-transform: translate(-150px, 150px);
    -ms-transform: translate(-150px, 150px