css遗忘篇:transform:ratate(180deg)失效的解决方法

博客介绍了CSS3属性的使用,包含简易版和复杂版。简易版可直接和.inline - block配合使用产生奇效;复杂版则需要设置过渡事件。

简易版
直接和.inline-block配合使用也能出现奇效

  • update 2018-10-23 19:27:52

复杂版

.empMoreInfoControl {
  position: relative;
  .iconfont {
    position: absolute;
    top:.05rem;
    margin-left:.1rem;
    @extend .animation1;
  }
  &.active {
    .iconfont {
      position: absolute;
      top:.05rem;
      @extend .animation1;
      transform: rotate(180deg);
    }
  }
}

需要设置过度事件

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>自动旋转展开魔方</title> <style> html,body{margin:0;height:100%;background:#111;display:flex;justify-content:center;align-items:center;perspective:1200px} .scene{ width:200px;height:200px;position:relative; transform-style:preserve-3d; animation:spin 10s linear infinite; /* 关键:自动旋转 */ } .face{ position:absolute;width:200px;height:200px; font-size:60px;color:#fff;display:flex;align-items:center;justify-content:center; } /* 六个面颜色 + 向外平移 120px */ .front {background:#e74c3c;transform:rotateY( 0deg) translateZ(100px);} .back {background:#2ecc71;transform:rotateY(180deg) translateZ(100px);} .right {background:#3498db;transform:rotateY( 90deg) translateZ(100px);} .left {background:#f1c40f;transform:rotateY(-90deg) translateZ(100px);} .top {background:#9b59b6;transform:rotateX( 90deg) translateZ(100px);} .bottom{background:#1abc9c;transform:rotateX(-90deg) translateZ(100px);} .front1 {background:#e74c3c;transform:rotateY( 0deg) translateZ(250px);} .back1 {background:#2ecc71;transform:rotateY(180deg) translateZ(250px);} .right1 {background:#3498db;transform:rotateY( 90deg) translateZ(250px);} .left1 {background:#f1c40f;transform:rotateY(-90deg) translateZ(250px);} .top1 {background:#9b59b6;transform:rotateX( 90deg) translateZ(250px);} .bottom1{background:#1abc9c;transform:rotateX(-90deg) translateZ(250px);} @keyframes spin{ from{transform:rotateX(0deg) rotateY(0deg)} to{transform:rotateX(360deg) rotateY(360deg)} } @keyframes breatheZ { 0%, 100% { transform: translateZ(250px); } 50% { transform: translateZ(100px); } } .outer { transform-style: preserve-3d; animation: breatheZ 2s ease-in-out infinite; } </style> </head> <body> <div class="scene"> <img class="face front" src="./2.jpg" alt=""> <img class="face front1 outer" src="./1.jpg" alt=""> <img class="face back" src="./5.jpg" alt=""> <img class="face back1 outer" src="./2.jpg" alt=""> <img class="face right" src="./6.jpg" alt=""> <img class="face right1 outer" src="./3.jpg" alt=""> <img class="face left" src="./7.jpg" alt=""> <img class="face left1 outer" src="./4.jpg" alt=""> <img class="face top" src="./1.jpg" alt=""> <img class="face top1 outer" src="./5.jpg" alt=""> <img class="face bottom" src="./3.jpg" alt=""> <img class="face bottom1 outer" src="./6.jpg" alt=""> </div> <audio id="bgMusic" loop> <source src="./几米 - 拥有.mp3"> </audio> <button style="position:absolute;bottom:30px">播放音乐</button> <script> document.body.addEventListener(&#39;click&#39;, function() { const music = document.getElementById(&#39;bgMusic&#39;); music.play().catch(e => alert(&#39;播放失败,请检查文件路径或浏览器权限&#39;)); }, { once: true }); </script> </body> </html>为什么我的相册只有一张照片在收缩,我想让外层的6张都收缩
08-02
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值