01.CSS动画--transform

transform:　　

　　translate(参数1，参数2)；让元素在X轴与Y轴方向发生偏移-->参数1：X；参数2：Y

　　rotate(参数1)；让元素进行旋转；单位(deg)

　　scale(参数1，参数2)；让元素在X轴与Y轴放大或缩小多少倍-->参数1：X；参数2：Y

　　skew(参数1，参数2)；skew(30deg,20deg)-->围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度

transition:过渡效果

　　transition: all 1s linear 3s;

　　*过渡效果

<em id="__mceDel">　　参数1：用来指定对那些属性使用过渡效果

　　参数2：过渡效果的持续时间

　　参数3：过渡效果的显示速度变化

　　参数4：用来指定过渡效果的延迟时间*/</em>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style>

#div1{

width: 100px;

height: 100px;

/*过渡效果

参数1：用来指定对那些属性使用过渡效果

参数2：过渡效果的持续时间

参数3：过渡效果的显示速度变化

参数4：用来指定过渡效果的延迟时间*/

transition: all 1s linear 3s;

border: 1px solid red;

margin: auto;

background-image: url("../../../img/f3_Android1.png");

background-size: 100% 100%;

}

#div1:hover{

/*translate：让元素在X和Y轴发生偏移参数1：X轴方向偏移参数2：Y轴方向偏移

translatex:让元素在X轴方向发生偏移

translatey:让元素在Y轴方向发生偏移*/

/*transform: translate(50px,0);*/

/*scale:让元素在X轴和Y轴都发生缩放参数1：X轴方向的方法倍数参数2：Y轴方向的放大倍数

scaleX：让元素在X轴方向发生缩放

scaleY：让元素在Y轴方向发生缩放*/

transform: scaleX(1.5);

/*rotate：让你的元素按照指定的中心点进行旋转

rotateX:让元素沿着X轴旋转

rotateY：让元素沿着Y轴旋转

*/

/*transform: rotateY(180deg);*/

/*transform: skewY(-90deg);*/

/*transform-origin:用来设置旋转的中心点*/

/*transform-origin: left;*/

}

</style>

<title>变形效果</title>

</head>

<body>

<div id="div1">

</div>

</body>

</html>

转载于:https://www.cnblogs.com/gfl123/p/7881651.html

01.CSS动画--transform相关推荐

css动画 transform 的旋转应用示例
属性: rolateX rolateY rolateZ 三个方向的旋转方向及角度 rolateX rolateZ 从正斜上方查看可以理解为顺时针旋转: rolateY 从正斜上方查看可以理 ...
css 跳跃动画,CSS动画实例：跳跃的字符
1．翻转的字符在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: H E L L O 为container和span定义CSS样式规则,并定义实现 ...
css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
css旋转动画定义中心,css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画一.总结一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
css hover变成手_web前端入门到实战：彻底掌握css动画「transition」
马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了 ...
[京东实践干货]手把手教你实现「京喜工厂」的CSS动画效果
0 契机与背景今年Q1(2020年第一季度)参与了京喜事业部「京喜工厂」业务的前端开发.用户可以通过「京喜工厂」参与口罩.抽纸.大米等商品的"在线生产",既能趣味造物,又能免费领 ...
【前端知识点总结】CSS 基础六 - 常见的CSS动画
空间(3d)转换 tramsform: 值 ; 移动 tramsform:translate3d(x,y,z); 添加位移属性 transform: translate3d(x轴, y轴, z轴); ...

01.CSS动画--transform

01.CSS动画--transform相关推荐

最新文章

热门文章