Css 3D summary and css3d Summary

Css 3D summary and css3d Summary
CSS 3D-summary from cainiao first, you need to learn some basic knowledge. We use transform to implement the effects of various cool days. Several attributes of transform should be remembered:

Rotate () clockwise rotation
Scale () Scaling
Skew () skew
Transform () mobile

Practice

<style media="screen">  .box{    width: 20px;    height: 20px;    background-color: red;    transform: rotate(45deg) scale(2) skew(29deg,30deg) translate(20px,20px);  }</style><div class="box"></div>

These are 2D knowledge, please remember !!! Next, let's take a look at the second small case of basic 3D knowledge.

  <div class="camer">    <div class="wutai">      <div class="page top"></div>      <div class="page bottom"></div>      <div class="page left"></div>      <div class="page right"></div>      <div class="page front"></div>      <div class="page back"></div>    </div>  </div>

Css

Body {background: # eadcec ;}. camer {perspective: 800px; width: 300px; margin: 100px auto ;}. wutai {width: 300px; height: 300px; position: relative; transform-style: preserve-3d; transform: rotateX (30deg) rotateY (30deg);-webkit-animation: bianhuan 5S infinite linear ;}. page {position: absolute; width: 300px; height: 300px; opacity: 0.9 ;}. page. left {background: url (img/1.jpg) no-repeat; background-size: cover; transform: rotateY (-90deg) translateZ (150px );}. page. right {background: url (img/2.jpg) no-repeat; background-size: cover; transform: rotateY (90deg) translateZ (150px );}. page. top {background: url (img/3.jpg) no-repeat; background-size: cover; transform: rotateX (90deg) translateZ (150px );}. page. bottom {background: url (img/4.jpg) no-repeat; background-size: cover; transform: rotateX (-90deg) translateZ (150px );}. page. front {background: url (img/5.jpg) no-repeat; background-size: cover; transform: translateZ (150px); font-size: 150px ;}. page. back {background: url (img/6.jpg) no-repeat; background-size: cover; transform: translateZ (-150px );} @-webkit-keyframes bianhuan {animation effect 0% {-webkit-transform: rotateY (0deg);} 50% {-webkit-transform: rotateY (360deg );} 51% {-webkit-transform: rotateX (0deg);} 100% {-webkit-transform: rotateX (360deg );}}

The third small case

  <div class="camer">    <div id="wutai">      <div class="page"></div>      <div class="page"></div>      <div class="page"></div>      <div class="page"></div>      <div class="page"></div>      <div class="page"></div>      <div class="page"></div>      <div class="page"></div>    </div>  </div>  <div class="box">    <input type="button" value="<" id="left">    <input type="button" value=">" id="right">  </div>

CSS

body{  background: #f2ded3;}.camer{  width: 400px;  perspective:800px;  margin:150px auto;  transform:rotateX(-10deg) rotateY(0deg);}wutai{  width: 200px;  height: 100px;  transform-style: preserve-3d;  position: relative;  transition: all 1s;}.page{  width: 200px;  height: 100px;  position: absolute;}img{  width: 200px;  height: 100px;}.box{  width: 200px;  background-color: red;  margin-left: 460px;}.box #left{  float: left;  width: 50px;  height: 30px;  background:#199ef2;  border: 1px;  color: white;}.box #right{    float: right;  width: 50px;  height: 30px;  background:#199ef2;  border: 1px;  color: white;}

Js

Window. onload = function () {var mystyle = document. getElementById ("mystyle"); var stylestr = ""; // start to do polygon for (var I = 0; I <9; I ++) {stylestr + = ". page: nth-last-of-type ("+ (I + 1) +") {transform: rotateY ("+ (60 * I) +" deg) translateZ (173px);} "} mystyle. innerHTML = stylestr; var wutai = document. getElementById ("wutai"); var d = 0; var left = document. getElementById ("left"); var right = document. getElementById ("right"); left. onclick = function () {d --; wutai. style. transform = "rotateY (" + 70 * d + "deg)";} right. onclick = function () {d ++; wutai. style. transform = "rotateY (" + 70 * d + "deg )"}}

Do you think that the legendary 3D is not as difficult as you think? Of course, if you want to learn 3D well, you still need to keep learning and practicing.

I have done these cases. I don't know if I have found that I want to make an effect. First, I need a large div to set the line of sight size, and then set a div to set the 3D effect of transform. Finally, I want to add what I want to achieve. effect.