CSS 3D动画效果

最新推荐文章于 2024-05-16 03:33:23 发布

Bear

最新推荐文章于 2024-05-16 03:33:23 发布

阅读量1k

点赞数 1

分类专栏： HTML与CSS 文章标签： css 3d

本文链接：https://blog.csdn.net/bear_huangzhen/article/details/101051136

版权

本文介绍了四个使用CSS 3D实现的精彩效果：1) 两面翻转的图片展示；2) 导航菜单的3D视觉增强；3) 创新的‘开门大吉’3D动画；4) 子菜单导航栏的立体效果，通过这些示例深入探讨了CSS 3D在网页交互中的应用。

摘要由CSDN通过智能技术生成

示例1（两面翻转的图片）：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两面翻转的图片</title>
    <style>
        div {
            width: 224px;
            height: 224px;
            margin: 100px auto;
            position: relative;
        }
        
        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;

        }
        
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden;  /*不是正面对向屏幕，就隐藏*/
        }
        
        div:hover img {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<div>
    <img src="img/qian.svg" alt=""/>
    <img src="img/hou.svg" alt=""/>
</div>
</body>
</html>

示例2（导航菜单3D）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D导航</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      /*取消ul的默认样式*/
      list-style: none;
      margin: 90px auto;
      width: 800px;
    }
    ul li {
      width: 120px;
      height: 50px;
      float: left;
      position: relative;
      /*设置子元素显示方式为3d*/
      transform-style:preserve-3d;

最低0.47元/天解锁文章

Bear

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
CSS 3D动画效果

示例1（两面翻转的图片）：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>两面翻转的图片</title> <style> div { width: 2...
复制链接

扫一扫

专栏目录