CSS3 3D transforms系列教程-威廉希尔_jQuery之家

获知制定3D绘画是开端获知3D 一种罚款的使轮流办法。一旦你主人的了制定3D绘画的办法,不论何种草率地的想制定更复杂的3D质地?敝在这样地跑过空军将领开端获知制定3D威廉希尔。

3D威廉希尔的HTML建筑学和3D纸牌的HTML建筑学俱简略,它需求6个元从来制定威廉希尔的6个面:

1
2
3
4
5
6

给威廉希尔的六岁面设置根本的外景方法和量级:

.container {
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

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

制定3D卡时,敝只需求旋转它的反面,助动词=have3D威廉希尔,敝需求旋转6个外表正中鹄的5个。。外表1与免去 这是前面和前面的两条边。,外表3和4是摆布安博。,外表5和6是左右两个主。

#cube .front  { transform: rotateY(   0deg ); }
#cube .back   { transform: rotateX( 180DEG ); }
#cube .right  { transform: rotateY(  90DEG ); }
#cube .left   { transform: rotateY( -90DEG ); }
#cube .top    { transform: rotateX(  90DEG ); }
#cube .bottom { transform: rotateX( -90DEG ); }                            
                            

敝可以移除它#cube .front的申诉,因它缺乏音响效果。敝把它放在编码中使编码更完全地。。

如今,威廉希尔所非常面都被旋转了,最好的前面可以主教权限。有4个铅直于观察员的边。,因而敝难看见他们。。把它们放在精密的可容纳若干座位,敝需求使适应他们的提取岩芯位置。威廉希尔的全部面都是200像素宽,将提取岩芯点转变到威廉希尔的提取岩芯需求让步半个的宽度的间隔:100像素。

#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 ); }                              
                            

坚持到底:嗨translateZ解释在rotate后来地,transform 次序很重要。你需求花一点点工夫获知编码。。每个面在其提取岩芯点开端。,之后它们的提取岩芯点部分向外使轮流。。

如今,敝制定好了人家威廉希尔,但这项任务还缺乏完成或结束。。

归属z轴立体

助动词=have用户体会,当威廉希尔的人家面抵达新的可容纳若干座位的时分,敝的3D 使轮流不克不及翘面外表经过的交界面,尽管当敝把元素放在z轴立体在远处时,变形是必定的。

确保3D 使轮流的润滑性,Safari 逛商店的人分解元素,之后敷用药使轮流。。像这样,不论何种使轮流如果恳求,译本的消除走样音响效果依然在。不顾怎样,在三维空间中停止使轮流时,译本将是像素。

译本像素化音响效果

检查译本像素效应

回想视力第三演示,不顾什么都要坚持到底 perspective 估价有多小?,第一张脸无不回到这样的可容纳若干座位。。

处理这样地变形成绩,敝可以把3D质地推回去,前外表将就座Z立体的后部。。

#cube { transform: translateZ( -100px ); }                              
                            

威廉希尔

检查威廉希尔音响效果-1

要提出威廉希尔的所非常面,敝需求人家礼貌来旋转威廉希尔,庶几乎显示一切的六岁面。敝只需求在对应的外表上器械相反的使轮流。。之后它可以在#box切换一致的的类以显示一致的的外表。

#  { transform: translateZ( -100px ) rotateY(    0deg ); }
#   { transform: translateZ( -100px ) rotateX( -180DEG ); }
#  { transform: translateZ( -100px ) rotateY(  -90DEG ); }
#   { transform: translateZ( -100px ) rotateY(   90DEG ); }
#    { transform: translateZ( -100px ) rotateX(  -90DEG ); }
# { transform: translateZ( -100px ) rotateX(   90DEG ); }                              
                            

请坚持到底,在下面的编码中,使轮流是若何器械反向推拿的。。先部分用translateZ替换提取岩芯点,之后旋转全部外表。。

最后的,你可以添加人家transition来过渡一下威廉希尔的旋转动画片。

威廉希尔

检查威廉希尔音响效果-2

相干3D威廉希尔威廉希尔音响效果:纯CSS3超酷3D旋转威廉希尔动画片神效

CSS3 3D 环绕使轮流跑过

  1. Perspective
  2. 3D transform 属性
  3. 纸牌翻转