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

      

  • 相关阅读:
    UOJ168. 【UR #11】元旦老人与丛林
    luogu3308,LOJ 2196 [SDOI2014]LIS
    CF1349F2. Slime and Sequences (Hard Version)
    6210. wsm
    欧拉数学习小记
    CF1508F. Optimal Encoding
    CF1508C. Complete the MST
    联合省选2021 游记
    一. Docker介绍
    Elasticsearch
  • 原文地址:https://www.cnblogs.com/hubj/p/3885106.html
Copyright © 2011-2022 走看看