zoukankan      html  css  js  c++  java
  • CSS3 perspecitve属性

    M

    M
    .div1
    {
    	position: relative;
    	height: 150px;
    	 150px;
    	margin: 0px;
    	padding:2px;
    	border: 1px solid black;
    	perspective:550;
    	-webkit-perspective:550;
    	perspective-origin: 50% 100px;
    	-webkit-perspecitve-origin: 50% 100px;
    }
    
    .div2
    {
    	position: absolute;
    	border: 1px solid black;
    	background-color: yellow;
    	transform: rotateX(0deg);
    	-webkit-transform: rotateX(0deg);
    	-webkit-animation: rotateXing 1.8s infinite linear;
    	animation: rotateXing 1.8s infinite linear;
    	148px;
    	height:148px;
    	text-align:center;
    	line-height:148px;
    }
    .div3
    {
    	position: absolute;
    	border: 1px solid black;
    	background-color: green;
    	transform: rotateY(0deg);
    	-webkit-transform: rotateY(0deg);
    	-webkit-animation: rotateYing 2.8s infinite linear;
    	animation: rotateYing 2.8s infinite linear;
    	148px;
    	height:148px;
    	text-align:center;
    	line-height:148px;
    }
    @-webkit-keyframes rotateXing {
      from {
      	transform: rotateX(1deg);
    	-webkit-transform: rotateX(1deg);
      }
      to {
        transform: rotateX(359deg);
    	-webkit-transform: rotateX(359deg);
      }
    }
    @keyframes rotateXing {
       from {
      	transform: rotateX(1deg);
    	-webkit-transform: rotateX(1deg);
      }
      to {
        transform: rotateX(359deg);
    	-webkit-transform: rotateX(359deg);
      }
    }
    @-webkit-keyframes rotateYing {
      from {
      	transform: rotateY(1deg);
    	-webkit-transform: rotateY(1deg);
      }
      to {
        transform: rotateY(359deg);
    	-webkit-transform: rotateY(359deg);
      }
    }
    @keyframes rotateYing {
       from {
      	transform: rotateY(1deg);
    	-webkit-transform: rotateY(1deg);
      }
      to {
        transform: rotateY(359deg);
    	-webkit-transform: rotateY(359deg);
      }
    }
    

      

  • 相关阅读:
    C# 调用Java Webservice 加入SoapHeader 验证信息
    SqlServer查找表中多余的重复记录
    INI文件的读写
    Sql触发器脚本
    Sql遍历更新脚本
    CAS 单点登录,通过ticket 获取登录用户
    模块 | 验证格式
    aja如何解决跨域请求?
    说说各个浏览器box模型
    Vue 双向数据绑定原理分析
  • 原文地址:https://www.cnblogs.com/hubj/p/3885106.html
Copyright © 2011-2022 走看看