css3 转换transfrom 过渡transition 和两个@

做了一个demo。用到一些css3的动画,还是不太熟练,总结了一下。

1、 -webkit-font-smoothing: antialiased;

  • -webkit-font-smoothing: none: 无抗锯齿
  • -webkit-font-smoothing: subpixel-antialiased | default: 次像素平滑
  • -webkit-font-smoothing: antialiased: 灰度平滑

2、    -webkit-perspective: 800px; 设置元素被查看位置的视图:

值: 元素距离视图的距离,以像素计。

使子元素又了3d的效果:

<!DOCTYPE html>

<html>

<head>

<style>

#div1

{

position: relative;

height: 150px;

width: 150px;

margin: 50px;

padding:10px;

border: 1px solid black;

-webkit-perspective:150; /* Safari and Chrome */

}

#div2

{

padding:50px;

position: absolute;

border: 1px solid black;

background-color: yellow;

-webkit-transform: rotateX(60deg); /* Safari and Chrome */

}

</style>

</head>

<body>

<div id="div1">

<div id="div2">HELLO</div>

</div>

</body>

</html>

没那个,子元素会有动作但是没有3d效果

3、-webkit-transition: all .8s;

过渡属性   transition    可以设置4个属性    transition-property:规定应用过渡的 CSS 属性的名称。   transition-duration:定义效果花费的时间。默认是0   transition-timing-function   :定义过渡效果时间曲线。默认是“ease”       transition-delay:规定效果的延迟时间。默认是0

可以设置四个:那个过渡(property- 性质- 财产- 财产权- 属性) 、过渡时间(持续时间duration)、过渡样式 、延迟时间

那个过渡:

none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。

过渡效果:

linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)

4.-webkit-transform-style: preserve-3d;

2D Transform 方法

  • vt. 改变,使…变形;转换

一、transform  向元素应用2d或者3d的转换

(1)2d:transform

  • transform属性可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素,他有几个属性值参数:
  • rotate(旋转)允许你通过传递一个度数值来转动一个对象;
  • scale是一个缩放功能,可以让任一元素变的更大。它使用一个或者两个正数和负数以及小数作为参数;当使用一个参数时表示X轴和Y轴的缩放相同;
  • translate就是基于X和Y 坐标重新定位元素,当使用一个参数时表示X轴和Y轴的参数相同;
  • skew倾斜(ps中的斜切),参数是度数,当使用一个参数时表示X轴和Y轴的参数相同;
  • matrix矩阵变换,就是基于X和Y 坐标重新定位元素,它使用6个参数

transform-origin  允许你改变被转换元素的位置

JavaScript 语法: object.style.transformOrigin="20% 40%"

二、改变元素基点transform-origin

  • transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用;
  • 因为我们元素默认基点就是其中心位置,换句话说我们没有使用transform-origin改变元素基点位置的情况下,transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。
  • 但有时候我们需要在不同的位置对元素进行这些操作,那么我们就可以使用transform-origin来对元素进行基点位置改变,使元素基点不在是中心位置,以达到你需要的基点位置。
  • 下面我们主要来看看其使用规则:

    transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom 。
    • 语法:-moz-transform-origin: [ |  | left | center | right ][ |  | top | center | bottom ] ?
    • transform-origin接受两个参数,它们可以是百分比,em,px等具体的值,也可以是left,center,right,或者 top,center,bottom等描述性参数 ;
    • top left | left top 等价于 0 0;
    • top | top center | center top 等价于 50% 0
    • right top | top right 等价于 100% 0
    • left | left center | center left 等价于 0 50%
    • center | center center 等价于 50% 50%(默认值)
    • right | right center | center right 等价于 100% 50%
    • bottom left | left bottom 等价于 0 100%
    • bottom | bottom center | center bottom 等价于 50% 100%
    • bottom right | right bottom 等价于 100% 100%

其中 left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%

top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;

如果只取一个值,表示垂直方向值不变。

注:transform-origin并不是transform中的属性值,他具有自己的语法。

但是他要结合transform才能起作用

三、CSS3 transform-style 属性

 
规定被嵌套元素如何在 3D 空间中显示。

规定被嵌套元素如何在 3D 空间中显示。

4、perspective 属性

  规定 3D 元素的透视效果。

5、 perspective-origin

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。

注释:该属性必须与 perspective 属性一同使用,而且只影响 3D 转换元素。

6、backface-visibility 属性

backface-visibility 属性定义当元素不面向屏幕时是否可见。

1、动画  @keyframes   然后使用animation:第一个参数就行@keyframes 定义的参数

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

时间: 2024-10-13 10:54:08

css3 转换transfrom 过渡transition 和两个@的相关文章

css3 转换 、 过渡 、 动画 、 CSS 优化

1. 转换的原点 默认在中心点: 修改原点:transform-orign: 值: 1.x坐标 y坐标 当前物体左上角为x:0px y:0px; 2.宽度百分比 高度百分比 0%  0%  左上点 50% 50% 中心点 3.关键字: top bottom left right center 中间 默认 left top 左上点 4.如果只给一个值,x坐标和y坐标相同: 两     x坐标 y坐标 三     x坐标 y坐标 z坐标 2.转换 2d 形状 尺寸 位置 transform: 旋转:

CSS3 转换、过渡和动画

一.转换 1.属性:transform 取值:none/transform-function(转换函数) 注意:如果要实现多个转换函数的话,可以用空格分开若干transform-function 2.转换的原点 默认情况,原点在元素的中心处,width*50%,height*50% 更换原点-属性:transform-origin:数值/百分比/关键字(top/bottom/left/right) 取值:按照当前元素的左上点为(0,0) 一个值:所有轴的位置 两个值:第一个值表示x轴上的值,第二

CSS3动画基本的转换和过渡

理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x,y);//平移,x代表向又移动距离,y代表向下移动距离: transform:scale(x,y);//缩放,x代表水平缩放倍数,y代表垂直缩放倍数: transform:rotate(x);//旋转,x代表顺时针旋转多少度,如rotate(10deg) : transform:skew(x,y)

CSS3之过渡Transition

CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing 1.transition-property的语法[css] transition-property :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变) 2.transition-property的属性值 (1)none:transition马上停止执行

CSS3的变形transform、过渡transition、动画animation学习

学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.-ms-.-o-),本文为简化内容,直接使用了原版属性 根据不同属性的支持度,在实际使用的时候需要添加相应的浏览器前缀支持 目录: 变形transform 过渡transition 动画animation 一.变形transform 变形有rotate旋转.scale缩放.translate位移.sk

CSS3(2)--- 过渡(transition)

CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200px,如果直接从100px变化到200px.从视觉上看去并不友好.我们更喜欢看到的是平滑的过渡. 2.浮动的语法 属性语法格式 transition: 要过渡的属性 花费时间 运动曲线 何时开始; // 如果有多组属性变化,还是用逗号隔开.前两个属性必须写.后两个可以不写.运动曲线默认匀速.开始时间默

CSS3 过渡(Transition)

过渡 transition 复合属性,使CSS属性值在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果 取值: <'transition-property'>:检测或设置对象中参与过渡的属性 <'transition-duration'>:检测或设置对象过渡的持续时间 <'transition-timing-function'>:检测或设置对象中过渡的动画类型 <'transition-delay'>

CSS3 过渡 transition基础demo

过度代码 <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <meta charset="UTF-8"

关于CSS3转换2D,3D过渡与动画方法

总结: 观察者远近 perspective:指定距离,必须带像素单位px[ 观察者视角 perspective-origin:一般默认居中即可 ] 转换 transform 包含:rotate,translate,scale,matrix,perspective 子元素3D效果 transform-style : preserve-3d | flat [ 对象transform-origin一般默认居中即可 ] [ 元素背面 backface-visibility:一般默认可见即可 ] 元素旋转