css3实现卡片反转3d效果

backface-visibility:hidden;css3新属性
backface-visibility 属性定义当元素背面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时,该属性很有用。

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>title>
	<style>
		body{
			margin: 0;
		}
		.box{
			margin: 200px auto;
			position: relative;
			
			width: 250px;
			perspective:800px;
			transform-style: preserve-3d;
			
		}
		.front{
			position: relative;
			text-align: center;
			line-height:200px ;
			width: 250px;
			height: 200px;
			background-color: red;
			border-radius: 5px;
			z-index: 1;
			transition: all 2s;
			backface-visibility:hidden;
		}
		.back{
			position: absolute;
			top: 0;
			left: 0;
			text-align: center;
			line-height:200px ;
			width: 250px;
			height: 200px;
			background-color: blue;
			border-radius: 5px;
			transform: rotateY(180deg);
			backface-visibility:hidden;
			
			transition: all 2s;
			z-index:0;
		}
		.box:hover .front{
			transform: rotateY(-180deg);
			/* z-index: 1; */
		}
		.box:hover .back{
			transform: rotateY(0deg);
		}
	style>
  head>
  <body>
    <div class="box">
		<div class="front">前面div>
		<div class="back">后面div>
	div>

  body>
html>

你可能感兴趣的:(CSS技巧,css3,3d,css)