• css3学习--css3动画详解二(3d效果)


    一.设置3D场景

    perspective:800       //浏览器到物体的距离(像素)
    perspective-origin:50% (x轴) 50% (y轴)    //视点的位置

    transform-style: preserve-3d;

    示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    	<style type="text/css">
    	#experiment{
    		 -webkit-perspective: 800;
    		 -webkit-perspective-origin: 50% 50%;
    		 -webkit-transform-style: -webkit-preserve-3d;
    	}
    	.block{
    		500px;
    		height:500px;
    		text-align:center;
    		line-height:450px;/*牢记居中用行高 */
    		font-size:100px;
    		background-color:burlywood;
    		margin:100px auto;
    		transform:rotatex(45deg);
    		/*transform:rotatey(45deg);
    		transform:rotatez(45deg);*/
    	}
    	</style>
    </head>
    <body>
    	<div id="experiment">
    		<div class="block">css3</div>
    	</div>
    </body>
    </html>
    

      

  • 相关阅读:
    kafka+zookeeper集群部署
    rabbitmq集群部署
    nginx location语法
    rabbitmq单一部署
    Centos6国内可用yum源
    css
    imutable
    js解构复制语法
    redux
    json server问题
  • 原文地址:https://www.cnblogs.com/jerry666/p/5289331.html
Copyright © 2020-2023  润新知