当前位置:编程学习 > html/css >>

CSS3 3D transform创建立方体

首先建立html结构
[html] 
<section class="container"> 
  <div id="cube"> 
    <figure class="front">1</figure> 
    <figure class="back">2</figure> 
    <figure class="right">3</figure> 
    <figure class="left">4</figure> 
    <figure class="top">5</figure> 
    <figure class="bottom">6</figure> 
  </div> 
</section> 

然后定义css,关键是透视和style
[html] 
.container { 
  width: 200px; 
  height: 200px; 
  position: relative; 
  <span style="color:#ff0000;">perspective: 1000px;</span> 

 
#cube { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
 <span style="color:#ff0000;"> transform-style: preserve-3d;</span> 

 
#cube figure { 
  width: 196px; 
  height: 196px; 
  display: block; 
  position: absolute; 
  border: 2px solid black; 

定义立方体的6个面,一个element是有正反面的,这里都是以div中心先旋转一个角度,比如说back是先旋转180度,这时这个div的z轴射向页面里(默认的是从页面射向外面),然后向页面里100px
[html]  www.zzzyk.com
#cube .front  { transform: rotateY(   0deg ) translateZ( 100px ); } 
#cube .back   { transform: rotateX( 180deg ) translateZ( 100px ); } 
#cube .right  { transform: rotateY(  90deg ) translateZ( 100px ); } 
#cube .left   { transform: rotateY( -90deg ) translateZ( 100px ); } 
#cube .top    { transform: rotateX(  90deg ) translateZ( 100px ); } 
#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); } 

cube建立好了之后可以开始定义对cube的transform
[html] 
#cube.show-front  { transform: translateZ( -100px ) rotateY(    0deg ); } 
#cube.show-back   { transform: translateZ( -100px ) rotateX( -180deg ); } 
#cube.show-right  { transform: translateZ( -100px ) rotateY(  -90deg ); } 
#cube.show-left   { transform: translateZ( -100px ) rotateY(   90deg ); } 
#cube.show-top    { transform: translateZ( -100px ) rotateX(  -90deg ); } 
#cube.show-bottom { transform: translateZ( -100px ) rotateX(   90deg ); } 

最后加上transition
[html] 
#cube { transition: transform 1s; } 

要点:
cube里的元素是一个整体,所有的transform都受到影响
一般是cube里的元素先transform到相应的位置,然后对cube进行transform
transform顺序很重要
transform总是和原始状态比较,不是和当前状态比较,如果没有用transition就没有动画,直接从一个状态变到另一个
transition会负责如何从当前状态到下一个状态,如果你想控制这个过程,应该用CSS3中的animation


作者:baoeni
补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,