学CSS3的3D动画 ——3D旋转—— 妙味课堂

Posted 蓝色幻想728

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学CSS3的3D动画 ——3D旋转—— 妙味课堂相关的知识，希望对你有一定的参考价值。

最近学了妙味的css3的动画，2D,3D的都有，先写一个最简单的3d翻转效果，鼠标移入div，正反面翻转效果。 
注意点有：

  1. 要给正反面外面加个父级；
  2. transform-style: preserve-3d;是加在正反面的父级，使动画具有3d的效果；但是ie11并不支持preserve-3d
  3. perspective也要加在父级上，使动画具有透视效果；
  4. 要给父级也加上宽高，否则动画没有效果


<style>
#box{
margin: 70px auto;
width: 300px;
height: 200px; //父级要加宽高，否则旋转基点会很离谱
transform-style: preserve-3d; //preserve-3d加在父级上
transform-origin: 50px 100px;
transition: 0.3s linear;
position: relative;
perspective: 500px; //perspective也要加在父级上
}
#box div{
width: 300px;
height: 200px;
font: 50px/100px arial;
text-align: center;
position: absolute;
}
#box div:nth-of-type(1){
background: url(1.jpg);
}
#box div:nth-of-type(2){
background: url(2.jpg);
transform: translatez(1px);
}
#box:hover{
transform: rotateY(180deg);
}
</style>
<script>
</script>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
</div>
</body>

以上是关于学CSS3的3D动画 ——3D旋转—— 妙味课堂的主要内容，如果未能解决你的问题，请参考以下文章

Css3动画 如何画3D旋转效果或者卫星围绕旋转效果

CSS3动画之3D旋转

妙味课堂实战功能开发视频教程 3D翻转焦点图/瀑布流/拖拽购物车/模块化开发等实战教程

CSS3进阶酷炫的3D旋转透视

CSS3进阶：酷炫的3D旋转透视

CSS3动画结合js实现3D轮播