zoukankan      html  css  js  c++  java
  • css旋转

    翻转180度

    /* entire container, keeps perspective */
    .flip-container {
    	perspective: 1000;
    }
    	/* flip the pane when hovered */
    	.flip-container:hover .flipper, .flip-container.hover .flipper {
    		transform: rotateY(180deg);
    	}
    
    .flip-container, .front, .back {
    	width: 320px;
    	height: 480px;
    }
    
    /* flip speed goes here */
    .flipper {
    	transition: 0.6s;
    	transform-style: preserve-3d;
    
    	position: relative;
    }
    
    /* hide back of pane during swap */
    .front, .back {
    	backface-visibility: hidden;
    
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    html---------
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    	<div class="flipper">
    		<div class="front">
    			<!-- 前面内容 -->
    		</div>
    		<div class="back">
    			<!-- 背面内容 -->
    		</div>
    	</div>
    </div>
    旋转180度

    /*CSS3实现鼠标悬浮到图片使图片旋转180度*/
    .xwcms {
    margin: 0 auto;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 1s ease-out;
    -moz-transition: -moz-transform 1s ease-out;
    -o-transition: -o-transform 1s ease-out;
    -ms-transition: -ms-transform 1s ease-out;
    }
    .xwcms:hover {
    -webkit-transform: rotateZ(720deg);
    -moz-transform: rotateZ(720deg);
    -o-transform: rotateZ(720deg);
    -ms-transform: rotateZ(720deg);
    transform: rotateZ(720deg);
    }

    <img src="${ctx!}/ls20/dafo_01.png"  class="xwcms" />

     
  • 相关阅读:
    7.1类模板
    异质链表
    8.1多态性
    8.2虚函数
    error: C2664: “zajiao::zajiao(const zajiao &)”: 无法将参数 1 从“const char [12]”转换为“char *”
    #include <QPushButton>
    6.3多重继承
    华为集群后killsql命令和查看mr占用的磁盘空间
    linux的逻辑运算符
    test命令
  • 原文地址:https://www.cnblogs.com/sho560/p/6052408.html
Copyright © 2011-2022 走看看