css平面转动由里向外

CSS是构建网页的重要语言，而CSS动画则能够使网页元素更加生动有趣。其中，平面转动是一种非常常见的动画效果，下面我们来学习一下如何实现CSS平面转动由里向外的效果。

.card {
      width: 300px;
      height: 300px;
      position: relative;
      transform-style: preserve-3d;
      transform-origin: center;
      transform: perspective(800px) rotateY(0);
      transition: transform 1s;
}
.card .front, .card .back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 5px;
      box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}
.card .front {
      background-color: #fff;
}
.card .back {
      background-color: #f00;
      transform: rotateY(180deg);
}
.card:hover {
      transform: perspective(800px) rotateY(180deg);
}
    

在上面的代码中，我们首先创建了一个名为“card”的元素，它包含一个名为“front”的子元素和一个名为“back”的子元素。接着，我们对“card”元素进行了如下设置：

• 设置“position: relative”，使得该元素可以调整子元素的位置。
• 设置“transform-style: preserve-3d”，使得该元素及其子元素能够进行3D转换。
• 设置“transform-origin: center”，使得3D转换以元素中心为基准。
• 设置“transform: perspective(800px) rotateY(0)”和“transition: transform 1s”，分别表示使用透视效果和1秒钟的过渡动画。

接着，我们对“front”和“back”元素分别设置了以下内容：

• 设置“position: absolute; ”，表示它们的位置相对于父元素进行定位。
• 设置“width: 100%; height: 100%; ”，使得它们的尺寸与父元素相同。
• 设置“backface-visibility: hidden”，避免了即将翻转的元素在翻转过程中背面被显示。
• 设置“border-radius: 5px; box-shadow: 5px 5px 5px rgba(0,0,0,0.2); ”，使得元素显示圆角和阴影效果。

最后，我们使用:hover伪类选择器为“card”元素添加悬停效果，即当鼠标悬停在“card”元素上方时，元素将通过“transform: perspective(800px) rotateY(180deg); ”，使得它们从内部翻转成外部。

通过这些设置，我们就可以实现CSS平面转动由里向外的动画效果了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！