全回顾扫盲之css3实现旋转立方体

front
back
top
bottom
left
right

写好布局

  • 1.通过perspective设置好透视视角
  • 2.对容器cube声明为3D旋转
  • 3.利用rotate 和 translate完成立方体的布局。
  • 4.创建一个keyframe 动画,并添加到容器上

属性详解

  • perspective:透视,视角。perspective: 800px设置透视的视距,通过perspective-origin: 50% 100px设置透视的源点。直白点说,视距是看东西的远近,圆点是看东西的角度。 perspective属性设置在父元素上跟设置在当前元素上,效果是不同的。根据试验,我推测应该是跟源点不同有关。
  • transform-style:使被转换的子元素保留其 3D 转换。这个在w3c上明确说明了,这个属性应该设置在父元素上,可以对所有子元素进行声明。
  • rotateY,translateX:transform的属性,rotateY是依赖于Y轴旋转,通过transform-origin设置旋转源点,translateX定义X轴旋转值
  • @keyframes:有两中写法,一个是通过from to,@keyframes mymove{from {top:0px;}to {top:200px;}},也可以通过百分比,@keyframes mymove{0% {top:0px;}25% {top:200px;}50% {top:100px;}75% {top:200px;}100% {top:0px;}}。主要是用来描述 运动过程中各个阶段的状态
  • animation:共6个属性,animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,一般写法animation:mymove 5s infinite;

随机浏览