CSS3-2D及3D效果以及过渡

CSS转动

2D效果概念:

通过 CSS3 中的属性,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 实现2D或3D效果。
使用transform属性来实现,该属性的值是几个函数。

主要2d转换函数:

  • 1.translate(x,y) 或者 translateX(n) 或者 translateY(n) 平移
  • 2.rotate(10deg) 旋转,2d旋转
  • 3.scale(x,y)或者scaleX(n) 或者scaleY(n) 按比例放大缩小,包括边框
  • 4.skew(x,y)或者 skewX(n)或者 skewY(n) 根据给定的水平线(X 轴)和垂直线(Y 轴)参数转动

3D效果概念:

  • translate3d(x,y,z)定义3D平移,translateX(x)定义3D x轴平移,translateY(y)定义3Dy轴平移,translateZ(z)定义3D z轴平移,值为数值
  • scale3d(x,y,z)定义3D缩放,scaleX(x)缩放 x轴,scaleY(y)缩放 y轴,scaleZ(z)缩放 z轴
  • rotate3d(x,y,z,angle)定义3D旋转,rotateX(angle)定义 x轴的旋转,rotateY(angle)定义
    y轴的旋转,rotateZ(angle)定义 z轴的旋转,其中rotate(x,y,z,angle)官方是这样解释的,这里的x,y,z的取值是0或1,0表示不转动,1表示转动。angle表示转动多少度。

<html>
<head>
<meta charset="utf-8">
<title>无标题文档title>
<style>
    .box1{width: 100px;height: 100px;background-color: #18C112;transform: rotate3d(0,1,0,30deg)}
style>
head>
<body>
<div class="box1">div>
body>
html>

transform向元素应用2D或3D转换,下面涉及几个重要属性:

  • transfrom-origin允许你改变被转换元素的起点,2d旋转的起点,可以是具体值,分为x轴,y轴,也可以是代表值(center,left,right,top)
  • transform-style规定被嵌套元素如何在3D空间中显示
    flat子元素将不保留其3D位置
    preserve-3d子元素将保留其3D位置
  • perspective视距
  • perspective-origin视距的起点
  • backface-visibility当元素背面面对屏幕是否可见。
    visible
    hidden

作用:通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

过渡

缩写格式:
transition:property duration timing-function delay;

  • transition简写属性,用于在一个属性中设置四个过渡属性
  • transition-property规定应用过渡的CSS属性的名称
  • transition-duration定义过渡效果花费时间,默认是0
  • transition-timing-function规定过渡效果的时间曲线,默认是ease
  • transition-delay规定过渡效果何时开始,默认是0

<html>
<head>
<meta charset="utf-8">
<title>无标题文档title>
<style>
    .box1{width: 100px;height: 100px;background-color: #BA0F12;transition: width 1s ease 0s,background-color 1s ease 0s,height 1s ease 0s}
    .box1:hover{width: 200px;height: 200px;background-color: #00F93B;}
style>
head>

<body>
<div class="box1">div>
body>
html>

你可能感兴趣的:(CSS3)