css实现3D切换功能

xuhong 发布于2019-04-23 11:41 / 2765人阅读

摘要：

Demo

asdasdasd

DOCTYPE html>
<html lang="en">
<head>
    <title>Demotitle>
  <style>
       #app{
           width: 100px;
           height: 35px;
           background-color: #006600;
           text-align: center;
           line-height: 35px;
           position: relative;
           transform-style: preserve-3d;
           transition: all 0.3s linear;
       }
       #app:hover{
           transform: rotateX(90deg);
           transition: all 0.3s linear;
           -webkit-transform-origin: 50% 0;
       }
       #app:before{
           position: absolute;
           top: 100%;
           left: 0;
           content: attr(data-hover);
           width: 100px;
           height: 35px;
           transform: rotateX(-90deg);
           transition: all 0.3s linear;
           transform-origin: 50% 0;
           text-align: center;
           line-height: 35px;
            background-color: red;
       }
    style>
 
<div class="box">
    <div id="app" data-hover="asdasdasd">
        asdasdasd
    div>
div>
body>
html>

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1023.html

CSS动画之旋转魔方轮播

摘要：关于的详细讲解张鑫旭一个基本的立方体就需要结合以上三点属性来实现。写完这篇文章后确实感觉自己对方面的知识又熟悉了不少但是前端的主力还是月份又得继续深入学习方面的知识嘞本文参考内容关于的详细讲解张鑫旭详解彻底理解和的区别的原始出处很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过...

leone 2019-08-29 15:10 评论0 收藏0
CSS动画之旋转魔方轮播

摘要：关于的详细讲解张鑫旭一个基本的立方体就需要结合以上三点属性来实现。写完这篇文章后确实感觉自己对方面的知识又熟悉了不少但是前端的主力还是月份又得继续深入学习方面的知识嘞本文参考内容关于的详细讲解张鑫旭详解彻底理解和的区别的原始出处很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过...

LittleLiByte 2019-08-02 10:18 评论0 收藏0
CSS实现3D切换效果

摘要：譬如设置值为，相对于，则元素的变形较弱一些。经过测试，其视觉效果和是一样，相当于从无限远处平面超长焦观察这个动画。其作用是当旋转过正面，设置是否显示其背面。先上效果图和代码吧鼠标悬浮上去，蓝色的front面开始旋转 showImg(https://segmentfault.com/img/bVxLN9); 蓝色的front面转过90°时，黄色的back面会显现出来， showImg(...

QiShare 2019-08-02 15:55 评论0 收藏0
CSS实现3D切换效果

摘要：譬如设置值为，相对于，则元素的变形较弱一些。经过测试，其视觉效果和是一样，相当于从无限远处平面超长焦观察这个动画。其作用是当旋转过正面，设置是否显示其背面。先上效果图和代码吧鼠标悬浮上去，蓝色的front面开始旋转 showImg(https://segmentfault.com/img/bVxLN9); 蓝色的front面转过90°时，黄色的back面会显现出来， showImg(...

djfml 2019-08-30 13:05 评论0 收藏0
SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0