精选文章 CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解

作者:^smile 时间: 2021-02-05 09:43:18
^smile 2021-02-05 09:43:18
【摘要】filter:函数() 
Document 
     
 
 
     
     
    
 
 
2.   calc() 函数  
 
     
     
     
 
 
     
         
     
 
 
3.transition过渡 
    Document 
     
 
 
    
 
 
案列:transition 进度条 
    Docu...

filter:函数()

Document

<style>

img{

filter: blur(5px);

}

img:hover{

filter: blur(0);

}

</style>

   

2.   calc() 函数 

<style>

.father{

width: 300px;

height: 200px;

background-color: pink;

}

.son{

width: calc(250 - 30px);

height: 30px;

background-color: skyblue;

}

</style>

3.transition过渡

Document

<style>

div{

width: 200px;

height: 100px;

background-color: pink;

/* transition: width .5s ease 1s; */

/* transition: height .5s ease 1s; 没变化 */

 

/* 如果想要写多个属性,利用逗号隔开 */

transition:width .5s,height .5s ;

 

/* 如果想要多个属性都变化,属性写all就可以了 */

/* 谁做过渡给谁加 */

transition: all .5s;

}

div:hover{

width: 400px;

height: 500px;

background-color: lawngreen;

}

</style>

   

案列:transition 进度条

Document

<style>

.bar{

width: 150px;

height: 15px;

border: 1px solid red;

border-radius:7px ;

padding: 1px;

transition: all 10s;

}

.bar_in{

width: 50%;

height: 100%;

background-color: red;

}

.bar:hover .bar_in{

width: 100%;

}

</style>

 

4. transform: translate()位移

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解1

Document

<style>

div{

width: 200px;

height: 200px;

background-color: pink;

/* x就是x轴上移动位置,y轴就是y轴上移动位置,中间用逗号隔开 */

transform: translate(x,y);

transform: translate(100px,100px);

/* 只移动x轴 */

transform: translate(100px);

}

</style>

案列:让盒子水平居中

Document

<style>

div{

position: relative;

width: 400px;

height: 400px;

/* 我们tansform里面的参数可以用%

如果里面的参数据哦%移动的距离是盒子自身的宽度或则高度来对比的

这里的50%就是50px,因为盒子的宽度是100px */

background-color: pink;

/* transform: translateX(50%); */

}

p{

position: absolute;

top:50%;

left: 50%;

width: 200px;

height: 200px;

background-color: purple;

/* margin-top: -100px;

margin-left: -100px; */

/* 盒子往上走自已高度的一半 */

transform: translate(-50%,-50%);

}

span{

/* transform对于行内元素是无效的 */

transform:translate(300px,300px);

}

</style>

5.transform: rotate()旋转;

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解2

Document

<style>

   

img{

width: 150px;

border-radius: 50%;

/* 顺时针旋转45度 */

/* transform: rotate(45deg); */

border: 5px solid pink;

margin-left: 100px;

margin-top: 100px;

/* 过渡写到本身上,说做动画给谁加 */

transition: all 0.3s;

}

img:hover{

transform: rotate(360deg);

}

</style>

案例:旋转三角形

Document

<style>

div{

position: relative;

width: 400px;

height: 40px;

border: 1px solid #000;

}

div::after{

content: '';

position: absolute;

top: 8px;

right: 15px;

width: 10px;

height: 10px;

border-right: 1px solid red;

border-bottom: 1px solid red;

transform:rotate(45deg);

transition: all .7s;

}

div:hover::after{

transform: rotate(225deg);

}

</style>

 

6.ransform-origin转换的中心点

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解3

Document

<style>

div{

width: 200px;

height: 200px;

background-color: pink;

margin: 100px auto;

transition: all 1s;

/* 可以跟方位名词 */

/* transform-origin: left bottom; */

/* 默认是50% 50%相当于center center */

/* 可以设置像素 */

transform-origin:50px 50px ;

}

div:hover{

transform: rotate(360deg);

}

</style>

案例:旋转中心点

Document

<style>

div{

overflow: hidden;

width: 200px;

height: 200px;

border: 1px solid pink;

margin: 100px auto;

float: left;

}

div::before{

content: '嘿嘿';

display: block;

width: 100%;

height: 100%;

background-color: hotpink;

transition: all .6s;

transform: rotate(180deg);

transform-origin:left bottom;

}

div:hover::before{

transform: rotate(0);

}

</style>

7.transform: scale()缩放

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解4

Document

<style>

div{

width: 200px;

height: 200px;

background-color: pink;

margin: 100px auto;

transition: all .5s;

transform-origin:left bottom ;

}

div:hover{

/* transform: scale(x,y);里面写的数字不跟单位就是倍数 */

/* 修改了宽度为原来的倍,高度不变 */

/* transform: scale(2,2); */

/* 等比例缩放同时修改宽度和高度,有简单的写法 */

transform: scale(2);

 

/* 我们可以进行缩放,小于1就是缩放 */

/* transform: scale(0.5,0.5); */

/* transform: scale(0.5) */

/* scale的优势之处:不会影响其它的盒子,而且可以设置缩放的中心点 */

}

</style>

案例:图片放大

图片放大

<style>

div{

float: left;

width: 400px;

height: 200px;

margin: 10px;

overflow: hidden;

}

div img{

width: 100%;

height: 100%;

transition: all 0.6s;

}

div img:hover{

transform: scale(1.1); 

}

</style>

案列:分页按钮

分页按钮

<style>

li{

float: left;

width:30px ;

height: 30px;

border: 1px solid #000;

margin: 10px;

text-align: center;

line-height: 30px;

list-style: none;

border-radius: 50%;

cursor: pointer;

transition: all .4s;

 

}

li:hover{

transform: scale(1.2);

}

</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

 

8.  transform总结

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解5

总结

<style>

div{

width: 200px;

height: 200px;

margin: 100px auto;

background-color: pink;

transition: all .4s;

}

div:hover{

/* transform: rotate(180deg)translate(150px,50px) ; */

/* 我们同时有位移和其他属性,我们需要把位移放到最前面 */

transform: translate(150px,50px) rotate(180deg)scale(1.2);

}

</style>

 

9.  animation动画

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解6

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解7

动画

<style>

   

   

/* 我们一打开页面,一个盒子就从左边走到右边 */

/* 定义动画 */

@keyframes move{

/* 开始的状态 */

0%{

/* width:100px; */

transform: translateX(0px);

}

/* 结束状态 */

100%{

/* height: 100px; */

transform: translateX(1000px);

}

 

}

div{

width: 200px;

height: 200px;

background-color: aqua;

/* margin: 100px auto; */

/* 调用动画 */

/* 动画名称 */

animation-name: move;

/* 持续时间 */

animation-duration: 2s;

}

</style>

   

案例:form和to

form和to

<style>

/* from和to等价于0% 和100% */

/* @keyframes move{

form{

transform:translate(0,0)

}

to{

transform: translate(1000px,0);

}

} */

@keyframes move{

0%{

transform: translate(0.0);

}

25%{

transform: translate(100px,0);

}

50%{

transform:translate(1000px,500px);

}

75%{

transform: translate(0,500px); 

}

100%{

transform: translate(0,0);

}

}

/* 动画序列 */

div{

width: 100px;

height: 100px;

background-color: aqua;

animation-name: move;

animation-duration: .4s;

}

</style>

 

动画属性

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解8

动画属性

   <style>

@keyframes move{

0%{

transform: translate(0,0);

}

100%{

transform: translate(1000px,0);

}

}

div{

width: 100px;

height: 100px;

background-color: pink;

/* 调用动画 */

animation-name: move;

/* 持续时间 */

animation-duration:2s;

/* 运动曲线 */

animation-timing-function: ease;

/* 何时开始 */

animation-delay: 1s;

/* 重复次数 iteration重复的count次数 infinite */

animation-iteration-count: infinite;

/* 是否反方向播放 默认noraml */

animation-direction: alternate;

/* 动画结束后的状态,默认是backwards,回到起始状态, */

animation-fill-mode: backwards;

/* animation:动画名称,持续时间 运动曲线 何时开始 播方次数 是否反方向 动画起始或则结束的状态 */

/* animation: name duration timing-function delay iteration-count direction fill-mode; */

animation: move 2s ease 1s infinite alternate backwards;

 

}

div:hover{

/* 鼠标经过div,让这个div停止动画,鼠标离开后就继续动画 */

animation-play-state: paused;

}

   </style>

 

10.transform: translate3d

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解9

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解10

 

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解11

 

   Document

<style>

body{

/* 透视写到被观察元素的父盒子上 */

perspective: 200px;

}

div{

width: 200px;

height: 200px;

background-color: pink;

/* transform: translateX(100px);

transform: translateY(100px); */

transform:translateX(100px)translateY(100px) translateZ(100px) ;

/* translateZ沿着Z轴移动 后面的单位我们一般跟px  */

/* translateZ(100px)向外移动100px */

/* 3D移动有简写的方法 */

transform: translate3d(x,y,z);

transform: translate3d(100px,100px,100px);

/* xyz不能省略的,如果没有就写0 */

transform: translate3d(0,100px,100px);

}

</style>

10.(1) transform: translateZ()

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解12

z轴平移

<style>

body{

perspective: 500px;

}

div{

width: 200px;

height: 200px;

background-color: pink;

margin: 100px auto;

transform: translateZ(0);

}

</style>

(2)  transform: rotateZ();

z轴旋转

<style>

body{

perspective: 300px;

}  

img{

display: block;

width: 400px;

height: 400px;

margin: 100px auto;

transition: all 1s;

}

img:hover{

/* transform: rotateX(-45deg); */

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

transform: rotateZ(180deg);

}

</style>

 

(3)transform-style: preserve-3d

CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解13

transform-style

<style>

body{

perspective: 300px;

}

.box{

position: relative;

width: 200px;

height: 200px;

margin: 100px auto;

border: 1px solid #000000;

transition: all 2s;

/* 让子元素保持3d立体空间环境 */

transform-style: preserve-3d;

}

.box:hover{

transform: rotateY(60deg);

}

 

.box div{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: pink;

}

.box div:last-child{

background-color: purple;

transform: rotateX(60deg);

}

</style>

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:五个从存储类内存中受益的应用程序

下一篇:3dmax高级建模方法总结

您可能感兴趣

  • c#重点知识详解(三)

    第三章: 类属性使用过RAD开发工具的一定inspector很熟悉,程序员通过它可以操作对象的属性,DELPHI中引入了PUBLISH关键字来公布对象属性受到程序员的普遍欢迎.通过存取标志来访问private成员,在c#中有两种途径揭示类的命名属性——通过域成员或者通过属性。前者是作为具有公共访问性的成员变量而被实现的;后者并不直接回应存储位置,只是通过存取标志(accessors)被访问。...

  • c#语言重点知识详解(四:加框与解框)

    第四章:C# 中的加框与去框 C# 运行时中有两种类型:引用类型(reference)(在 C# 中用类声明)和值类型(value)(在 C# 中用结构声明)。引用和值类型在几个重要方面有所不同。值类型“感觉上”象一个数据。它包括预定义数值类型(如int、bool)以及用户定义的类型(circle、Point等)。如上文所述,值类型的变量是实际的值,所以在您使用变量时,通常处理的是实际的值。...

  • DirectX5.0最新游戏编程指南 DirectDraw教程篇 三、创建动画

    三、创建动画    上面的例子都只是将数据写入后台缓冲区,然后将后台缓冲区与主表面翻转,其速度并不太快。下面的例子DDEX4和DDEX5优化了实时功能,使看起来更象一个真正的游戏。DDEX4显示了怎样为表面设置 Color key,怎样使用IDirectDrawSurface::BltFast方法将屏外表面各部分拷贝到后台缓冲区以产生动画。DDEX5加入了读取调色板并在动画运行时改变调色板的...

  • c#重点知识详解(五 代理 二 )

    代理 二  心情好坏!!!!!!!!!!!!!!!!!!!!!我的准女友跟我说拜拜!!!!!!!!!!!!!!!!!!!!!再也不想搞计算机了兄弟们撤退吧!!!!!!!!!!!!!!!!!!!!c#我没心情写了。以后再说吧!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 1〉事件 上一章讲解了有关代理的基本应用,本章将继续讲解深入代理的使用。这里我们讲解使用代理来处理事件...

  • 常用数据类型使用转换详解

    常用数据类型使用转换详解作者:程佩君 读者层次:初学刚接触VC编程的朋友往往对许多数据类型的转换感到迷惑不解,本文将介绍一些常用数据类型的使用。我们先定义一些常见类型变量借以说明 int i = 100;long l = 2001;float f=300.2;double d=12345.119;char username[]="女侠程佩君";char temp[200];char *bu...

  • C#重点知识详解(五 代理:一)

    导 读:代理实现的是象c++等语言的指针功能,不同于函数指针,代理是一种面向对象、安全类型的。 作者: wkrain   www.ASPCool.com 第五章:代理 代理实现的是象c++等语言的指针功能,不同于函数指针,代理是一种面向对象、安全类型的。代理事派生于公共基类(system)的一种参考类型,方法被压入一个代理中,对于实例方法被称为实例的组成实体或关于实例的方法,而静态方法,被...

  • C#重点知识详解(五 代理:二 )

    导 读:处理事件在c#中对比c++和vb来说更聪明,你可以写代理然后写事件处理者,事件处理者是一种定义在控件和窗体类中的重载的公共事件。 作者: wkrain   www.ASPCool.com  代理 二 1〉事件 上一章讲解了有关代理的基本应用,本章将继续讲解深入代理的使用。这里我们讲解使用代理来处理事件。关于事件在另一章进行详细讲解。处理事件在c#中对比c++和vb来说更聪明,你可...

  • Java动画编程基础第三部分

    双缓冲技术:另一种减小帧之间的闪烁的方法是使用双缓冲,它在许多动画applet中被使用。主要原理是创建一个后台图象,将一帧画入图象,然后调用drawImage()将整个图象一次画到屏幕上去。好处是大部分绘制是离屏的。将离屏图象一次绘至屏幕上比直接在屏幕上绘制要有效得多。双缓冲可以使动画平滑,但有一个缺点,要分配一张后台图象,如果图象相当大,这将需要很大一块内存。当你使用双缓冲技术时,应重载u...

CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解介绍:华为云为您免费提供CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解的相关内容。| 移动地址: CSS3 transition过渡,transform2D移动 translate 旋转 rotate 缩放 scalse, animation动画,.transform: translate3d详解 | 写博客