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);
      }
    }
    

      

  • 相关阅读:
    VUE学习(一)——使用npm安装项目
    Maven学习总结(七)——eclipse中使用Maven创建Web项目
    maven学习(三)-使用maven来创建项目
    Spring中的注解——@nullable和@notnull
    sping中 各种注解——@SuppressWarnings注解用法
    Maven学习(一)——maven入门
    Oracle创建dblink报错:ORA-01017、ORA-02063解决
    C#的空接合运算符 三目运算符
    C#的空接合运算符 三目运算符
    C#的空接合运算符 三目运算符
  • 原文地址:https://www.cnblogs.com/hubj/p/3885106.html
Copyright © 2011-2022 走看看