css - what does scale3d() function really do? -


scale3d(sx, sy, sz)

i can't understand scale3d() when change (sz) value

in below code can see value of (sz) = 1

body{perspective:600px}  div{      width: 300px;      height: 300px;      background-color: burlywood;      margin: auto;      border-radius:40px;      transition: 5s ease-in-out;      transform: scale3d(1,1,1)  }
<div></div>

in below code can see value of (sz) = 0.5

but nothing changed same result

body{perspective:600px}  div{      width: 300px;      height: 300px;      background-color: burlywood;      margin: auto;      border-radius:40px;      transition: 5s ease-in-out;      transform: scale3d(1,1,0.5)  }
<div></div>

note : tried solutions & values nothing happened

the third number in scale3d z-axis, applicable three-dimensional shapes.

your examples have perspective, they're still use two-dimensional shapes, nothing happens.

you can see effect true cube:

scale3d(1,1,1)

#wrapper {    perspective: 1200px;    width: 200px;    height: 200px;    margin: 80px auto;  }  #cube {    width: 100%;    height: 100%;    position: absolute;    transform-style: preserve-3d;    transform: rotatex(45deg) rotatey(0deg) rotatez(45deg) scale3d(1, 1,1);    transition: transform 1s;  }  #cube>div {    width: 100%;    height: 100%;    position: absolute;    display: flex;  }  #cube>div span {    margin: auto;    font-size: 50px;  }  #left {    background-color: rgba(25, 25, 112, 0.7);    transform: rotatey(-90deg) translatez(100px);  }  #right {    background-color: rgba(47, 79, 79, 0.7);    transform: rotatey(90deg) translatez(100px);  }  #front {    background-color: rgba(119, 136, 153, 0.7);    transform: rotatey(0deg) translatez(100px);  }  #back {    background-color: rgba(72, 61, 139, 0.7);    transform: rotatex(180deg) translatez(100px);  }  #top {    background-color: rgba(0, 128, 128, 0.7);    transform: rotatex(90deg) translatez(100px);  }  #bottom {    background-color: rgba(70, 130, 180, 0.7);    transform: rotatex(-90deg) translatez(100px);  }
<div id="wrapper">    <div id="cube">      <div id="left"><span>left</span></div>      <div id="right"><span>right</span></div>      <div id="front"><span>front</span></div>      <div id="back"><span>back</span></div>      <div id="top"><span>top</span></div>      <div id="bottom"><span>bottom</span></div>    </div>  </div>

scale3d(1,1,0.5)

#wrapper {    perspective: 1200px;    width: 200px;    height: 200px;    margin: 50px auto;  }  #cube {    width: 100%;    height: 100%;    position: absolute;    transform-style: preserve-3d;    transform: rotatex(45deg) rotatey(0deg) rotatez(45deg) scale3d(1,1,0.5);    transition: transform 1s;  }  #cube > div {    width: 100%;    height: 100%;    position: absolute;    display: flex;  }  #cube > div span {    margin: auto;    font-size: 50px;  }  #left {    background-color: rgba(25,25,112,0.7);    transform: rotatey(-90deg) translatez(100px);  }  #right {    background-color: rgba(47,79,79,0.7);    transform: rotatey(90deg) translatez(100px);  }  #front  {    background-color: rgba(119,136,153,0.7);    transform: rotatey(0deg) translatez(100px);  }  #back {    background-color: rgba(72,61,139,0.7);    transform: rotatex(180deg) translatez(100px);  }  #top {    background-color: rgba(0,128,128,0.7);    transform: rotatex(90deg) translatez(100px);  }  #bottom {    background-color: rgba(70,130,180,0.7);    transform: rotatex(-90deg) translatez(100px);  }
<div id="wrapper">    <div id="cube">      <div id="left"><span>left</span></div>      <div id="right"><span>right</span></div>      <div id="front"><span>front</span></div>      <div id="back"><span>back</span></div>      <div id="top"><span>top</span></div>      <div id="bottom"><span>bottom</span></div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more